/**
 * Soulmkt — Avaliações (Soulmkt_SoulReviews)
 *
 * Segue o padrão do tema: cores em `hsl()`, propriedades em ordem alfabética,
 * raios por token para que os temas `rounded` e `circle` os sobrescrevam.
 *
 * O que este arquivo NÃO faz, de propósito:
 *
 * - Não estiliza `.asr-star-*`. As estrelas usam a mesma técnica do tema, mas com
 *   as classes `soulreviews-stars*`: em `product.css` as `asr-star-*` valem só
 *   dentro de `.asd-reviews` (`@scope`), a lista antiga que este bloco substitui.
 *
 * - Não fixa cor de estrela. Ela vem da configuração de cor do tema.
 */

/* ==========================================================================
   Tokens de raio — sobrescritos pelos temas
   ========================================================================== */

:root[theme='rounded'] {
  --soulreviews-radius-box: 0.25rem;
  --soulreviews-radius-chip: 0.25rem;
  --soulreviews-radius-bar: 0.25rem;
  --soulreviews-radius-badge: 0.25rem;
  --soulreviews-radius-media: 0.25rem;
  --soulreviews-radius-button: 0.25rem;
}

:root[theme='circle'] {
  --soulreviews-radius-box: 0.875rem;
  --soulreviews-radius-chip: 2rem;
  --soulreviews-radius-bar: 2rem;
  --soulreviews-radius-badge: 2rem;
  --soulreviews-radius-media: 0.5rem;
  --soulreviews-radius-button: 2rem;
}

/* ==========================================================================
   Bloco de avaliações — comum aos três layouts
   ========================================================================== */

.soulreviews {
  color: hsl(180 6% 6%);
  margin: 2rem 0;
}

.soulreviews__heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.soulreviews__empty {
  color: hsl(180 2% 34%);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}

/* Chamada para avaliar: botão + estrelas de nota rápida na mesma linha. */
.soulreviews__ask {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 1.5rem;
}

.soulreviews__cta {
  background: var(--button-buy-bg-color, hsl(160 41% 60%));
  border-radius: var(--soulreviews-radius-button, 0);
  color: var(--button-buy-text-color, hsl(0 0% 100%));
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}

/* O tema imprime `a:hover { color: <cor de link> }` no <head>; sem repetir a
   cor aqui, o texto do botão troca para a cor de link no hover. */
.soulreviews__cta:hover,
.soulreviews__cta:focus,
.soulreviews__cta:visited {
  color: var(--button-buy-text-color, hsl(0 0% 100%));
}

.soulreviews__cta:hover {
  filter: brightness(0.94);
  text-decoration: none;
}

/* Nota agregada -------------------------------------------------------- */

.soulreviews__score {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.soulreviews__score-value {
  color: hsl(180 6% 6%);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.soulreviews__score--inline .soulreviews__score-value {
  font-size: 1.125rem;
}

.soulreviews__score-count {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

.soulreviews__score .asr-star-wrap i {
  font-size: var(--size-20, 1.25rem);
}

/* Estrelas ------------------------------------------------------------- */

/* As duas camadas de `product/stars.phtml`: a cheia, recortada pela largura,
   por cima da vazia. Sem isto a cheia sai AO LADO da vazia (10 ícones).
   `max-content`: dentro de grid (o resumo) o item esticaria até a coluna, e o
   percentual da camada cheia passaria a valer sobre a largura esticada — nota
   3,0 aparecia com as 5 estrelas cheias. */
.soulreviews-stars {
  display: inline-flex;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  width: max-content;
}

.soulreviews-stars__bg {
  color: hsl(0 0% 78%);
  display: inline-flex;
}

.soulreviews-stars__fill {
  color: var(--review-icon-color, hsl(37 91% 55%));
  display: inline-flex;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  white-space: nowrap;
}

/* Listas dentro das abas ----------------------------------------------- */

/* Na posição "aba" o bloco fica em `.product-detail .pd-content`, e o
   `product.css` do tema estiliza toda lista dali: `ul li a { float: left }` e
   `ul li { width: 100% }`. Sem neutralizar, o histograma vira uma linha só e as
   fotos da avaliação ficam uma embaixo da outra. A especificidade vence a do
   tema porque o head imprime este arquivo ANTES do product.css. */
.product-detail .pd-content .soulreviews ul li a {
  float: none;
}

.product-detail .pd-content .soulreviews ul li {
  width: auto;
}

/* Histograma ----------------------------------------------------------- */

.soulreviews-histogram {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

/* A linha é flex também sem o link: na página do vendedor o histograma não filtra, e os
   três spans ficam direto no <li> — sem isso a barra não tem largura e os números empilham. */
.soulreviews-histogram__row,
.soulreviews-histogram__link {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.soulreviews-histogram__row {
  margin: 0 0 0.25rem;
}

.soulreviews-histogram__link {
  color: inherit;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.soulreviews-histogram__link:hover .soulreviews-histogram__bar-fill {
  filter: brightness(0.92);
}

.soulreviews-histogram__label {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

.soulreviews-histogram__bar {
  background: hsl(0 0% 91%);
  border-radius: var(--soulreviews-radius-bar, 0);
  flex: 1;
  height: 0.5rem;
  overflow: hidden;
}

.soulreviews-histogram__bar-fill {
  background: var(--review-icon-color, hsl(37 91% 55%));
  display: block;
  height: 100%;
}

.soulreviews-histogram__count {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
  min-width: 2ch;
  text-align: center;
}

/* Características ------------------------------------------------------ */

.soulreviews__traits {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.soulreviews__traits--hidden[hidden] {
  display: none;
}

.soulreviews__trait {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.soulreviews__trait-label {
  color: hsl(180 6% 6%);
  flex: 0 0 10rem;
  font-size: 0.875rem;
}

.soulreviews__trait-bar {
  background: hsl(0 0% 91%);
  border-radius: var(--soulreviews-radius-bar, 0);
  flex: 1;
  height: 0.375rem;
  min-width: 5rem;
  overflow: hidden;
}

.soulreviews__trait-bar-fill {
  background: var(--review-icon-color, hsl(37 91% 55%));
  display: block;
  height: 100%;
}

.soulreviews__trait-value {
  color: hsl(180 6% 6%);
  font-size: 0.875rem;
  font-weight: 700;
}

.soulreviews__trait-mode,
.soulreviews__trait-count {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

/* Lista de avaliações --------------------------------------------------- */

.soulreviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.soulreviews__more {
  background: none;
  border: 1px solid hsl(0 0% 78%);
  border-radius: var(--soulreviews-radius-button, 0);
  color: hsl(180 6% 6%);
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  margin: 1rem 0 0;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
}

.soulreviews__more:hover {
  background: hsl(0 0% 97%);
}

/* `display` acima venceria o atributo `hidden`: o botão fica no HTML mesmo sem
   página seguinte, porque um filtro pode trazer uma lista com mais páginas. */
.soulreviews__more[hidden] {
  display: none;
}

.soulreviews__more[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* ==========================================================================
   Item da listagem
   ========================================================================== */

.soulreviews-item {
  border-bottom: 1px solid hsl(0 0% 91%);
  padding: 1rem 0;
}

.soulreviews-item:last-child {
  border-bottom: 0;
}

.soulreviews-item__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
}

.soulreviews-item__author {
  color: hsl(180 6% 6%);
  font-size: 0.9375rem;
  font-weight: 700;
}

.soulreviews-item__verified,
.soulreviews-item__repurchase {
  border-radius: var(--soulreviews-radius-badge, 0);
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}

.soulreviews-item__verified {
  background: hsl(145 63% 94%);
  color: hsl(145 63% 26%);
}

.soulreviews-item__repurchase {
  background: hsl(210 100% 95%);
  color: hsl(210 79% 34%);
}

.soulreviews-item__date {
  color: hsl(180 2% 54%);
  font-size: 0.75rem;
  margin-left: auto;
}

.soulreviews-item__rating .asr-star-wrap i {
  font-size: var(--size-14, 0.875rem);
}

.soulreviews-item__title {
  color: hsl(180 6% 6%);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0.375rem 0 0.25rem;
}

.soulreviews-item__body {
  color: hsl(180 2% 24%);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.soulreviews-item__media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}

.soulreviews-item__media-item img,
.soulreviews-item__media-item video {
  border-radius: var(--soulreviews-radius-media, 0);
  display: block;
  height: 4.5rem;
  object-fit: cover;
  width: 4.5rem;
}

/* Vídeo: a capa é o primeiro quadro do MP4, com o play por cima. O clique é
   do link (abre o visualizador), nunca do <video> sem controles. */
.soulreviews-item__media-item video {
  background: hsl(0 0% 12%);
  pointer-events: none;
}

.soulreviews-item__media-item--video .soulreviews-item__media-link {
  cursor: pointer;
  position: relative;
}

.soulreviews-item__media-play {
  align-items: center;
  background: hsl(0 0% 0% / 55%);
  border-radius: 50%;
  color: hsl(0 0% 100%);
  display: flex;
  font-size: 0.75rem;
  height: 1.75rem;
  justify-content: center;
  left: 50%;
  padding-left: 0.125rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.75rem;
}

/* Variação comprada: "Cor: Branco  Tamanho: P". */
.soulreviews-item__variation {
  color: hsl(180 2% 34%);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--size-13, 0.8125rem);
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}

.soulreviews-item__variation-label {
  color: hsl(180 6% 6%);
  font-weight: 700;
}

.soulreviews-item__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.soulreviews-item__helpful {
  background: none;
  border: 1px solid hsl(0 0% 85%);
  border-radius: var(--soulreviews-radius-button, 0);
  color: hsl(180 2% 34%);
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
}

.soulreviews-item__helpful:hover {
  background: hsl(0 0% 97%);
}

.soulreviews-item__helpful[disabled] {
  cursor: default;
  opacity: 0.6;
}

.soulreviews-item__helpful-count {
  font-weight: 700;
}

/* ==========================================================================
   Resumo por IA
   ========================================================================== */

.soulreviews-ai {
  background: hsl(0 0% 98%);
  border: 1px solid hsl(0 0% 91%);
  border-radius: var(--soulreviews-radius-box, 0);
  margin: 0 0 1.5rem;
  padding: 1rem;
}

/* A tag é a identificação da origem: fica visível, nunca discreta a ponto de
   passar despercebida. */
.soulreviews-ai__tag {
  align-items: center;
  color: hsl(258 72% 52%);
  display: flex;
  font-size: 0.8125rem;
  font-weight: 700;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.soulreviews-ai__icon {
  font-size: 0.875rem;
}

.soulreviews-ai__edited {
  color: hsl(180 2% 54%);
  font-weight: 400;
}

.soulreviews-ai__body {
  color: hsl(180 2% 24%);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.soulreviews-ai__points {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0.75rem 0 0;
}

.soulreviews-ai__list {
  flex: 1;
  list-style: none;
  margin: 0;
  min-width: 12rem;
  padding: 0;
}

.soulreviews-ai__list li {
  font-size: 0.875rem;
  margin: 0 0 0.25rem;
  padding-left: 1.125rem;
  position: relative;
}

.soulreviews-ai__list li::before {
  left: 0;
  position: absolute;
}

.soulreviews-ai__list--pros li::before {
  color: hsl(145 63% 36%);
  content: '+';
  font-weight: 700;
}

.soulreviews-ai__list--cons li::before {
  color: hsl(0 65% 51%);
  content: '−';
  font-weight: 700;
}

/* ==========================================================================
   L1 — Resumo primeiro
   ========================================================================== */

.soulreviews--l1 .soulreviews__summary {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr);
  margin: 0 0 1.5rem;
}

.soulreviews--l1 .soulreviews__ai {
  grid-column: 1 / -1;
}

/* ==========================================================================
   L2 — Características em foco
   ========================================================================== */

.soulreviews--l2 .soulreviews__topbar {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.soulreviews__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.soulreviews__chip {
  background: hsl(0 0% 98%);
  border: 1px solid hsl(0 0% 88%);
  border-radius: var(--soulreviews-radius-chip, 0);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 9rem;
  padding: 0.625rem 0.875rem;
  text-align: left;
}

.soulreviews__chip:hover {
  border-color: hsl(0 0% 70%);
}

.soulreviews__chip[aria-pressed='true'] {
  background: hsl(0 0% 94%);
  border-color: hsl(180 6% 6%);
}

.soulreviews__chip-label {
  color: hsl(180 6% 6%);
  font-size: 0.875rem;
  font-weight: 700;
}

.soulreviews__chip-value {
  color: hsl(180 6% 6%);
  font-size: 1rem;
  font-weight: 700;
}

.soulreviews__chip-mode,
.soulreviews__chip-count {
  color: hsl(180 2% 34%);
  font-size: 0.75rem;
}

.soulreviews__chip .asr-star-wrap i {
  font-size: var(--size-12, 0.75rem);
}

/* ==========================================================================
   L3 — Conversa
   ========================================================================== */

.soulreviews--l3 .soulreviews__feedhead {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
}

.soulreviews__traits-toggle {
  background: none;
  border: 0;
  color: var(--link_color, hsl(160 41% 45%));
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0;
  text-decoration: underline;
}

.soulreviews--l3 .soulreviews__ai--card {
  border-left: 3px solid hsl(258 72% 52%);
}

.soulreviews__list--feed .soulreviews-item {
  background: hsl(0 0% 99%);
  border: 1px solid hsl(0 0% 93%);
  border-radius: var(--soulreviews-radius-box, 0);
  margin: 0 0 0.75rem;
  padding: 1rem;
}

/* ==========================================================================
   Formulário de avaliação
   ========================================================================== */

.soulreviews-form {
  margin: 1.5rem 0;
  max-width: 44rem;
}

.soulreviews-form__heading {
  color: hsl(180 6% 6%);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.soulreviews-form__blocked {
  background: hsl(45 100% 95%);
  border-radius: var(--soulreviews-radius-box, 0);
  color: hsl(30 70% 28%);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
}

.soulreviews-form__verified {
  color: hsl(145 63% 26%);
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.soulreviews-form__fieldset {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.soulreviews-form__legend {
  color: hsl(180 6% 6%);
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding: 0;
}

.soulreviews-form__label {
  color: hsl(180 6% 6%);
  display: block;
  font-size: 0.875rem;
  margin: 0.75rem 0 0.25rem;
}

/* Estrelas clicáveis: o input fica acessível ao teclado e ao leitor de tela,
   fora do fluxo visual — `display:none` o removeria da navegação. */
.soulreviews-form__stars,
.soulreviews-form__trait-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.25rem;
}

.soulreviews-form__star {
  cursor: pointer;
  position: relative;
}

.soulreviews-form__star input,
.soulreviews-form__star-input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

/* A validacao do tema insere `.validation-advice` como irmao do input oculto.
   Sem isto a mensagem herda `position:absolute` do contexto e some. */
.soulreviews-form__star-input + .validation-advice,
.soulreviews-form__stars .validation-advice {
  flex: 0 0 100%;
  order: 1;
  position: static;
}

.soulreviews-form__star i {
  color: hsl(0 0% 78%);
  font-size: 1.5rem;
}

.soulreviews-form__star-label {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/* `row-reverse` + `~` acende a estrela sob o cursor e todas à esquerda dela. */
.soulreviews-form__star:hover i,
.soulreviews-form__star:hover ~ .soulreviews-form__star i,
.soulreviews-form__star input:checked ~ i,
.soulreviews-form__star.is-selected i,
.soulreviews-form__star.is-selected ~ .soulreviews-form__star i {
  color: var(--review-icon-color, hsl(37 91% 55%));
}

.soulreviews-form__star input:focus-visible ~ i {
  outline: 2px solid hsl(210 100% 45%);
  outline-offset: 2px;
}

.soulreviews-form__trait {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}

.soulreviews-form__trait-label {
  color: hsl(180 6% 6%);
  flex: 0 0 11rem;
  font-size: 0.875rem;
}

.soulreviews-form__trait-boolean {
  display: flex;
  gap: 1rem;
}

.soulreviews-form__trait-stars i {
  font-size: 1.125rem;
}

.soulreviews-form__actions {
  margin: 1.5rem 0 0;
}

/* Área de anexos ------------------------------------------------------- */

.soulreviews-form__media {
  margin: 0.75rem 0 0;
}

/* ==========================================================================
   Selo do vendedor — tamanhos a, b, c
   ========================================================================== */

.soulreviews-seller {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.soulreviews-seller__name {
  color: hsl(180 6% 6%);
  font-size: 0.9375rem;
  font-weight: 700;
}

.soulreviews-seller__badge {
  border-radius: var(--soulreviews-radius-badge, 0);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
}

.soulreviews-seller__badge--official {
  background: hsl(210 100% 95%);
  color: hsl(210 79% 34%);
}

.soulreviews-seller__badge--top {
  background: hsl(45 100% 92%);
  color: hsl(36 78% 32%);
}

.soulreviews-seller__badge--good {
  background: hsl(145 63% 94%);
  color: hsl(145 63% 26%);
}

.soulreviews-seller__badge--regular,
.soulreviews-seller__badge--new {
  background: hsl(0 0% 94%);
  color: hsl(180 2% 34%);
}

.soulreviews-seller__sales {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

.soulreviews-seller__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  width: 100%;
}

.soulreviews-seller__metric {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

.soulreviews-seller__link {
  color: var(--link_color, hsl(160 41% 45%));
  font-size: 0.8125rem;
}

.soulreviews-seller__inline {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

.soulreviews-seller .asr-star-wrap i {
  font-size: var(--size-13, 0.8125rem);
}

/* Tamanho A — completo: métricas em coluna própria. */
.soulreviews-seller--a {
  background: hsl(0 0% 99%);
  border: 1px solid hsl(0 0% 93%);
  border-radius: var(--soulreviews-radius-box, 0);
  padding: 0.875rem 1rem;
}

/* Tamanho B — compacto: uma linha. */
.soulreviews-seller--b .soulreviews-seller__metrics {
  display: none;
}

/* Tamanho C — inline: só o texto corrido. */
.soulreviews-seller--c {
  font-size: 0.8125rem;
  gap: 0.25rem;
}

.soulreviews-seller--c .soulreviews-seller__metrics,
.soulreviews-seller--c .soulreviews-seller__sales {
  display: none;
}

/* ==========================================================================
   Página de reputação do vendedor
   ========================================================================== */

.soulreviews-reputation {
  margin: 1.5rem 0;
}

.soulreviews-reputation__head {
  border-bottom: 1px solid hsl(0 0% 91%);
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
}

.soulreviews-reputation__name {
  color: hsl(180 6% 6%);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.soulreviews-reputation__level {
  background: hsl(0 0% 94%);
  border-radius: var(--soulreviews-radius-badge, 0);
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
}

.soulreviews-reputation__window,
.soulreviews-reputation__sales {
  color: hsl(180 2% 54%);
  font-size: 0.8125rem;
  margin: 0.5rem 0 0;
}

.soulreviews-reputation__score {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.soulreviews-reputation__score-value {
  color: hsl(180 6% 6%);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.soulreviews-reputation__score-count {
  color: hsl(180 2% 34%);
  font-size: 0.875rem;
}

/* Estrelas e, embaixo delas, a quantidade de avaliações. */
.soulreviews-reputation__score-detail {
  display: grid;
  gap: 0.125rem;
}

/* Nota geral com o histograma | notas por característica. Sem características, a nota
   ocupa a largura toda. */
.soulreviews-reputation__summary {
  align-items: start;
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  margin: 0 0 1.5rem;
}

.soulreviews-reputation__summary > :only-child {
  grid-column: 1 / -1;
}

.soulreviews-reputation__overview .soulreviews-histogram,
.soulreviews-reputation__overview .soulreviews-reputation__no-rating {
  margin-bottom: 0;
}

.soulreviews-reputation__by-trait .soulreviews-reputation__subtitle {
  margin-top: 0;
}

.soulreviews-reputation__score .asr-star-wrap i {
  font-size: var(--size-20, 1.25rem);
}

.soulreviews-reputation__no-rating {
  background: hsl(0 0% 97%);
  border-radius: var(--soulreviews-radius-box, 0);
  color: hsl(180 2% 34%);
  font-size: 0.875rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
}

.soulreviews-reputation__metrics {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.soulreviews-reputation__metric {
  background: hsl(0 0% 98%);
  border-radius: var(--soulreviews-radius-box, 0);
  padding: 0.75rem;
}

.soulreviews-reputation__metric-label {
  color: hsl(180 2% 34%);
  display: block;
  font-size: 0.8125rem;
}

.soulreviews-reputation__metric-value {
  color: hsl(180 6% 6%);
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
}

/* ==========================================================================
   Estados de carregamento
   ========================================================================== */

.soulreviews.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.soulreviews__error {
  background: hsl(0 80% 96%);
  border-radius: var(--soulreviews-radius-box, 0);
  color: hsl(0 65% 38%);
  font-size: 0.875rem;
  margin: 0.75rem 0;
  padding: 0.625rem 0.875rem;
}

/* ==========================================================================
   Nota do vendedor (selo)
   ==========================================================================

   As estrelas sao o componente `soulreviews-stars` (product/stars.phtml), o
   mesmo da avaliacao de produto. Na PDP a nota e um link para a pagina de
   reputacao: a cor de link e o hover do tema nao podem pintar o numero. */

.soulreviews-seller__rating {
  align-items: center;
  color: hsl(180 6% 6%);
  display: inline-flex;
  gap: 0.375rem;
  text-decoration: none;
}

.soulreviews-seller__rating:hover,
.soulreviews-seller__rating:focus,
.soulreviews-seller__rating:visited {
  color: hsl(180 6% 6%);
}

.soulreviews-seller__rating:hover .soulreviews-seller__rating-count {
  text-decoration: underline;
}

.soulreviews-seller__rating-value {
  font-size: 0.875rem;
  font-weight: 700;
}

.soulreviews-seller__rating-count {
  color: hsl(180 2% 34%);
  font-size: 0.8125rem;
}

/* Na caixa de compra e nas linhas de oferta da PDP o selo fica embaixo do
   nome que o tema imprime. */
.area-vendor-link .soulreviews-seller,
.sellers-list__seller-infos .soulreviews-seller,
.sold-multiseller .soulreviews-seller {
  margin-top: 0.375rem;
}

/* Loja propria: nao ha reputacao de vendedor a exibir, so a identificacao. */
.soulreviews-seller--official {
  align-items: center;
  display: inline-flex;
}

.soulreviews-seller__link--shop {
  margin-left: 0.75rem;
}

/* ==========================================================================
   Complementos de layout
   ========================================================================== */

/* O histograma recebe a coluna inteira no L1. */
.soulreviews__histogram {
  margin-top: 1rem;
}

/* No L2 o resumo entra recolhido: aparece a tag e as primeiras linhas, e o
   proprio bloco de resumo controla a expansao. */
.soulreviews__ai--collapsed {
  margin-block: 0.75rem;
}

.soulreviews-ai__tag-text {
  font-size: 0.8125rem;
  font-weight: 600;
}

.soulreviews-reputation__subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
}

/* Lista de avaliações da reputação: raiz do JS, sem a margem do bloco da página do produto. */
.soulreviews--reputation {
  margin: 0;
}

/* ==========================================================================
   Botoes do formulario
   ==========================================================================

   `.button` do tema ja da cor, borda e altura. Aqui so o posicionamento — e o
   `.soulreviews-form__trait-select`, que o tema nao alcanca por nao ser um
   `select` dentro de `form.form-list`. */

/* "Entrar" de quem precisa de conta: botão cheio, nas cores do botão de compra da
   loja (as mesmas do `.soulreviews__cta`). Dobra a especificidade para vencer o
   `.button` do tema, e repete a cor no hover/focus/visited porque o tema imprime
   `a:hover { color: <cor de link> }` no <head>. */
.soulreviews-form .soulreviews-form__login {
  background: var(--button-buy-bg-color, hsl(160 41% 60%));
  border: 0;
  border-radius: var(--soulreviews-radius-button, 0);
  color: var(--button-buy-text-color, hsl(0 0% 100%));
  display: inline-block;
  font-size: var(--size-16, 1rem);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.75rem;
  min-width: 12rem;
  padding: 0.875rem 2rem;
  text-align: center;
  text-decoration: none;
}

.soulreviews-form .soulreviews-form__login:hover,
.soulreviews-form .soulreviews-form__login:focus,
.soulreviews-form .soulreviews-form__login:visited {
  background: var(--button-buy-bg-color, hsl(160 41% 60%));
  color: var(--button-buy-text-color, hsl(0 0% 100%));
  text-decoration: none;
}

.soulreviews-form .soulreviews-form__login:hover {
  filter: brightness(0.94);
}

/* No aviso de fotos, o mesmo botão em tamanho de linha. */
.soulreviews-form .soulreviews-form__media-login .soulreviews-form__login {
  font-size: var(--size-14, 0.875rem);
  margin: 0.5rem 0 0;
  min-width: 0;
  padding: 0.5rem 1.25rem;
}

/* Dobra a especificidade: o `.button` do tema define tamanho de botão pequeno. */
.soulreviews-form .soulreviews-form__submit {
  font-size: var(--size-16, 1rem);
  min-height: 3rem;
  min-width: 14rem;
  padding: 0.75rem 2rem;
}

/* Aviso de grupo obrigatório sem resposta (conferido pelo soulreviews.js). */
.soulreviews-form__error {
  color: hsl(0 65% 41%);
  font-size: var(--size-13, 0.8125rem);
  margin: 0.375rem 0 0;
}

.soulreviews-form__error[hidden] {
  display: none;
}

.soulreviews-form__trait-select {
  max-width: 100%;
  min-width: 12rem;
}

/* ==========================================================================
   Anexos do formulario
   ========================================================================== */

.soulreviews-form__media-pick {
  cursor: pointer;
  display: inline-block;
}

/* O input some visualmente mas continua alcancavel pelo teclado: `display:none`
   o tiraria da navegacao. */
.soulreviews-form__media-input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.soulreviews-form__media-pick-label {
  border: 1px solid hsl(0 0% 78%);
  border-radius: var(--soulreviews-radius-chip, 0);
  display: inline-block;
  font-size: var(--size-14, 0.875rem);
  padding: 0.5rem 1rem;
}

.soulreviews-form__media-input:focus-visible + .soulreviews-form__media-pick-label {
  outline: 2px solid hsl(210 100% 45%);
  outline-offset: 2px;
}

.soulreviews-form__media-hint {
  color: hsl(180 2% 34%);
  font-size: var(--size-12, 0.75rem);
  margin: 0.5rem 0 0;
}

/* Pelo link do e-mail, sem login: foto e vídeo pedem a conta. */
.soulreviews-form__media-login {
  color: hsl(180 2% 34%);
  font-size: var(--size-14, 0.875rem);
  margin: 0 0 1rem;
}

.soulreviews-form__media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

/* Miniaturas lado a lado. A especificidade vence o `.product-detail .pd-content
   ul li { width: 100% }` do tema (`product.css`), que vale dentro das abas. */
.soulreviews-form .soulreviews-form__media-list .soulreviews-form__media-item {
  flex: 0 0 auto;
  width: auto;
}

.soulreviews-form__media-item {
  border: 1px solid hsl(0 0% 88%);
  border-radius: var(--soulreviews-radius-box, 0);
  font-size: var(--size-12, 0.75rem);
  padding: 0.25rem;
  position: relative;
}

.soulreviews-form__media-item.is-uploading {
  opacity: 0.6;
}

.soulreviews-form__media-item.is-error {
  border-color: hsl(0 65% 51%);
  color: hsl(0 65% 41%);
}

.soulreviews-form__media-preview {
  display: block;
  height: 4.5rem;
  object-fit: cover;
  width: 4.5rem;
}

/* Foto ou vídeo da avaliação retomada que ainda não foi publicado: sem prévia. */
.soulreviews-form__media-pending {
  align-items: center;
  background: hsl(0 0% 96%);
  color: hsl(180 2% 34%);
  display: flex;
  justify-content: center;
  text-align: center;
}

.soulreviews-form__media-remove {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 78%);
  border-radius: 50%;
  color: crimson;
  cursor: pointer;
  height: 1.25rem;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: -0.375rem;
  top: -0.375rem;
  width: 1.25rem;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media only screen and (width <= 770px) {
  /* L1: a grade de duas colunas empilha. */
  .soulreviews--l1 .soulreviews__summary {
    grid-template-columns: 1fr;
  }

  /* L2: os chips viram faixa rolável, em vez de quebrar em várias linhas. */
  .soulreviews__chips {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  .soulreviews__chip {
    flex: 0 0 auto;
  }

  .soulreviews__trait-label,
  .soulreviews-form__trait-label {
    flex: 0 0 100%;
  }

  .soulreviews-item__date {
    margin-left: 0;
    width: 100%;
  }

  .soulreviews__score-value,
  .soulreviews-reputation__score-value {
    font-size: 2rem;
  }

  .soulreviews-reputation__metrics,
  .soulreviews-reputation__summary {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Nota rápida, formulário no bloco, ordenação, denúncia e remoção
   ========================================================================== */

/* Cada estrela é um link para o formulário com a nota marcada. O ícone é o do
   tema; ao passar o mouse acendem a estrela e as anteriores (`:has` alcança o
   irmão anterior; sem suporte, acende só a estrela sob o cursor). */
.soulreviews__quick {
  display: inline-flex;
  gap: 0.25rem;
}

.soulreviews__quick[hidden] {
  display: none;
}

.soulreviews__quick-star {
  color: hsl(0 0% 70%);
  font-size: var(--size-20, 1.25rem);
  line-height: 1;
  padding: 0.25rem;
  text-decoration: none;
}

.soulreviews__quick-star:hover,
.soulreviews__quick-star:focus-visible,
.soulreviews__quick-star:has(~ .soulreviews__quick-star:hover),
.soulreviews__quick-star:has(~ .soulreviews__quick-star:focus-visible) {
  color: var(--review-icon-color, hsl(37 91% 55%));
  text-decoration: none;
}

.soulreviews__ask-note {
  color: hsl(180 2% 34%);
  flex: 0 0 100%;
  font-size: var(--size-14, 0.875rem);
  margin: 0;
}

/* O formulário entra aqui, dentro do bloco — sem modal. A margem de cima o
   separa das estrelas que o abriram. */
.soulreviews__form-slot {
  border: 1px solid hsl(0 0% 88%);
  border-radius: var(--soulreviews-radius-box, 0);
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
  position: relative;
}

.soulreviews__form-slot[hidden] {
  display: none;
}

/* No modelo 2 o espaço é o topo da coluna da lista: sem margem, alinhado ao resumo. */
.soulreviews__main > .soulreviews__form-slot:first-child {
  margin-top: 0;
}

.soulreviews__form-close {
  background: none;
  border: 0;
  color: hsl(180 2% 34%);
  cursor: pointer;
  float: right;
  font-size: var(--size-13, 0.8125rem);
  padding: 0.25rem 0;
  text-decoration: underline;
}

.soulreviews__sort {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--size-14, 0.875rem);
  gap: 0.5rem;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
}

.soulreviews__sort[hidden] {
  display: none;
}

.soulreviews__sort-label {
  color: hsl(180 2% 34%);
}

.soulreviews__sort-select {
  max-width: 100%;
}

.soulreviews-item__report,
.soulreviews-item__remove {
  background: none;
  border: 0;
  color: hsl(180 2% 34%);
  cursor: pointer;
  font-size: var(--size-13, 0.8125rem);
  padding: 0.25rem 0;
  text-decoration: underline;
}

.soulreviews-item__report[disabled],
.soulreviews-item__remove[disabled] {
  cursor: default;
  opacity: 0.6;
}

/* Aviso que fica no lugar do "Denunciar" depois do envio. */
.soulreviews-item__report-sent {
  color: hsl(180 2% 34%);
  font-size: var(--size-13, 0.8125rem);
}

.soulreviews-item__remove[data-soulreviews-confirm='1'] {
  color: hsl(0 65% 38%);
}

.soulreviews-item__feedback {
  color: hsl(180 2% 34%);
  font-size: var(--size-13, 0.8125rem);
}

.soulreviews-item.is-removed {
  opacity: 0.5;
}

.soulreviews-report {
  background: hsl(0 0% 98%);
  border: 1px solid hsl(0 0% 91%);
  border-radius: var(--soulreviews-radius-box, 0);
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.soulreviews-report__title {
  font-size: var(--size-14, 0.875rem);
  font-weight: 600;
  margin: 0;
}

.soulreviews-report__reason,
.soulreviews-report__note {
  max-width: 100%;
  width: 100%;
}

.soulreviews-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.soulreviews-report__send {
  background: var(--button-buy-bg-color, hsl(160 41% 60%));
  border: 0;
  border-radius: var(--soulreviews-radius-button, 0);
  color: var(--button-buy-text-color, hsl(0 0% 100%));
  cursor: pointer;
  font-size: var(--size-13, 0.8125rem);
  font-weight: 700;
  padding: 0.5rem 1rem;
}

.soulreviews-report__cancel {
  background: none;
  border: 0;
  color: hsl(180 2% 34%);
  cursor: pointer;
  font-size: var(--size-13, 0.8125rem);
  text-decoration: underline;
}

.soulreviews-report__status {
  font-size: var(--size-13, 0.8125rem);
  margin: 0;
}

.soulreviews-report__status:empty {
  display: none;
}

/* ==========================================================================
   Posição na página: seção própria × aba
   ==========================================================================

   Na seção (`display/position = section`) o bloco fica no `content`, fora de
   `.product-detail`, que dá cor e tamanho de texto ao conteúdo das abas do
   tema; o título faz o papel do título da aba (mesmo tamanho e filete do
   `.product-detail .h5` de `product.css`). Na aba, o tema já põe título e
   margem por cima do bloco. */

.soulreviews--section {
  clear: both;
  font-size: var(--size-14, 0.875rem);
  margin: 3rem 0 2rem;
}

.soulreviews--section .soulreviews__heading {
  border-bottom: 1px solid hsl(0 0% 96%);
  font-size: var(--size-26, 1.625rem);
  font-weight: 600;
  margin: 0 0 1.25rem;
  padding: 0 0 0.875rem;
}

.soulreviews--tab {
  margin-top: 0;
}

/* ==========================================================================
   L4 — Seção com resumo fixo ao lado (modelo 2); colunas também do L5
   ==========================================================================

   O próprio bloco é o container das consultas de largura: na aba de um tema
   de três colunas ele é bem mais estreito que a tela, e media query não veria
   isso. O container fica SÓ no bloco: `container-type` vira containing block
   de `position: fixed`, e nada dentro dele usa `fixed` — o formulário e a foto
   ampliada abrem no próprio bloco, sem modal. */

.soulreviews--l4,
.soulreviews--l5 {
  container: soulreviews / inline-size;
}

.soulreviews__columns {
  align-items: start;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: minmax(13.75rem, 0.8fr) minmax(0, 2fr);
}

/* A coluna lateral acompanha a rolagem. A altura máxima com rolagem própria
   cobre o resumo com muitas características: sem ela, a parte de baixo (a
   chamada para avaliar) só apareceria no fim da lista. */
.soulreviews__side {
  border: 1px solid hsl(0 0% 88%);
  border-radius: var(--soulreviews-radius-box, 0);
  display: grid;
  gap: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

/* Cabeçalho fixo do tema: o mesmo desconto de 160px que o `scrollToElement`
   do `catalog/product/view.phtml` aplica quando o body tem `header-fixed`. */
.header-fixed .soulreviews__side {
  max-height: calc(100vh - 11rem);
  top: 10rem;
}

.soulreviews__score--side {
  flex-wrap: nowrap;
  gap: 0.75rem;
}

.soulreviews__score-detail {
  display: grid;
  gap: 0.125rem;
}

.soulreviews__side .soulreviews-histogram,
.soulreviews__side .soulreviews__traits,
.soulreviews__side .soulreviews__ask {
  margin: 0;
}

.soulreviews__side .soulreviews__trait-label {
  flex: 0 0 100%;
}

.soulreviews__side .soulreviews__cta {
  display: block;
  text-align: center;
  width: 100%;
}

.soulreviews-histogram__link[aria-pressed='true'] .soulreviews-histogram__label,
.soulreviews-histogram__link[aria-pressed='true'] .soulreviews-histogram__count {
  color: hsl(180 6% 6%);
  font-weight: 700;
}

.soulreviews__main {
  min-width: 0;
}

.soulreviews__main .soulreviews__ai {
  margin: 0 0 1.25rem;
}

.soulreviews__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  margin: 0 0 0.5rem;
}

.soulreviews__toolbar .soulreviews__sort {
  margin: 0 0 0 auto;
}

.soulreviews__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.soulreviews__filters[hidden] {
  display: none;
}

.soulreviews__filter {
  background: none;
  border: 1px solid hsl(0 0% 85%);
  border-radius: var(--soulreviews-radius-chip, 0);
  color: hsl(180 6% 6%);
  cursor: pointer;
  font-size: var(--size-14, 0.875rem);
  line-height: 1.4;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.soulreviews__filter:hover {
  border-color: hsl(0 0% 60%);
}

.soulreviews__filter[aria-pressed='true'] {
  background: hsl(180 6% 6%);
  border-color: hsl(180 6% 6%);
  color: hsl(0 0% 100%);
}

.soulreviews__filter:focus-visible {
  outline: 2px solid hsl(180 6% 6%);
  outline-offset: 2px;
}

/* Sem avaliações: as estrelas de avaliar ocupam o lugar do resumo. */
.soulreviews__empty-box {
  border: 1px dashed hsl(0 0% 80%);
  border-radius: var(--soulreviews-radius-box, 0);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding: 1rem;
}

.soulreviews__empty-box .soulreviews__empty {
  color: hsl(180 6% 6%);
  font-weight: 700;
  margin: 0;
}

.soulreviews__empty-hint {
  color: hsl(180 2% 34%);
  font-size: var(--size-13, 0.8125rem);
  margin: 0;
}

.soulreviews__empty-box .soulreviews__ask {
  margin: 0;
}

.soulreviews__empty-box .soulreviews__form-slot {
  justify-self: stretch;
}

/* ==========================================================================
   L5 — Fotos de clientes primeiro (modelo 5)
   ========================================================================== */

.soulreviews-photos {
  margin: 0 0 2rem;
}

.soulreviews-photos__head {
  align-items: baseline;
  border-bottom: 1px solid hsl(0 0% 96%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 0 0 0.875rem;
}

/* O título da faixa não repete o filete: ele já está no cabeçalho inteiro. */
.soulreviews .soulreviews-photos__title {
  border-bottom: 0;
  margin: 0;
  padding: 0;
}

.soulreviews-photos__meta {
  align-items: center;
  color: hsl(180 2% 34%);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: var(--size-13, 0.8125rem);
  gap: 0.375rem;
}

.soulreviews-photos__meta .asr-star-wrap i {
  font-size: var(--size-12, 0.75rem);
}

.soulreviews-photos__strip {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

/* A faixa mostra 6 miniaturas e o "+N"; as demais ficam no HTML para o
   anterior/próxima do visualizador. */
.soulreviews-photos__item:nth-child(n + 7):not(.soulreviews-photos__item--more) {
  display: none;
}

.soulreviews-photos__item[hidden],
.soulreviews-photos__item--narrow-only {
  display: none;
}

.soulreviews-photos__more-narrow {
  display: none;
}

.soulreviews-photos__thumb,
.soulreviews-photos__more {
  aspect-ratio: 1;
  border-radius: var(--soulreviews-radius-media, 0);
  display: block;
  overflow: hidden;
  width: 100%;
}

.soulreviews-photos__thumb-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.soulreviews-photos__thumb.is-current {
  outline: 3px solid var(--button-buy-bg-color, hsl(160 41% 60%));
  outline-offset: 2px;
}

.soulreviews-photos__more {
  background: hsl(180 6% 6%);
  border: 0;
  color: hsl(0 0% 100%);
  cursor: pointer;
  font-size: var(--size-14, 0.875rem);
  font-weight: 700;
  padding: 0;
  position: relative;
}

/* Texto para leitor de tela; na tela o botão mostra só o "+N". */
.soulreviews-photos__more-label {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* A avaliação ao lado da foto ampliada já está dentro de uma caixa: sem filete
   nem respiro de item de lista. */
.soulreviews-item--compact {
  border-bottom: 0;
  padding: 0;
}

.soulreviews-photos__all {
  color: var(--link_color, hsl(160 41% 45%));
  font-size: var(--size-13, 0.8125rem);
}

/* ==========================================================================
   L4 / L5 estreitos: as colunas empilham e a faixa mostra 3 fotos + "+N"
   ==========================================================================

   A consulta de container é a que vale (bloco estreito numa tela larga); a
   media query repete as regras para navegador sem consulta de container. */

@container soulreviews (width < 45rem) {
  .soulreviews__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .soulreviews__side {
    max-height: none;
    overflow: visible;
    position: static;
  }
}

@container soulreviews (width < 35rem) {
  .soulreviews-photos__strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .soulreviews-photos__item:nth-child(n + 4):not(.soulreviews-photos__item--more) {
    display: none;
  }

  .soulreviews-photos__item--narrow-only:not([hidden]) {
    display: block;
  }

  .soulreviews-photos__more-wide {
    display: none;
  }

  .soulreviews-photos__more-narrow {
    display: inline;
  }
}

@media only screen and (width <= 770px) {
  .soulreviews__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .soulreviews__side {
    max-height: none;
    overflow: visible;
    position: static;
  }

  .soulreviews--section .soulreviews__heading {
    font-size: var(--size-20, 1.25rem);
  }
}

@media only screen and (width <= 560px) {
  .soulreviews-photos__strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .soulreviews-photos__item:nth-child(n + 4):not(.soulreviews-photos__item--more) {
    display: none;
  }

  .soulreviews-photos__item--narrow-only:not([hidden]) {
    display: block;
  }

  .soulreviews-photos__more-wide {
    display: none;
  }

  .soulreviews-photos__more-narrow {
    display: inline;
  }
}

/* ==========================================================================
   Estrelas perto do título do produto (product/title-summary.phtml)
   ========================================================================== */

.soulreviews-title-summary {
  display: inline-block;
}

.soulreviews-title-summary__link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  text-decoration: none;
}

.soulreviews-title-summary__value {
  font-weight: 600;
}

.soulreviews-title-summary__count {
  color: hsl(180 2% 34%);
  font-size: var(--size-13, 0.8125rem);
  text-decoration: underline;
}

/* ==========================================================================
   Visualizador de fotos (product/lightbox.phtml) — todo layout
   ========================================================================== */

.soulreviews-item__media-link {
  cursor: zoom-in;
  display: block;
}

.soulreviews-photos__thumb {
  cursor: zoom-in;
}

/* `<dialog>` aberto com showModal(): fica na camada de topo, acima de qualquer
   container do tema. Caixa branca; à esquerda a foto num palco claro com a
   faixa de miniaturas embaixo, à direita a avaliação.
   `margin: auto` é o que centraliza o modal; o navegador já põe, mas o reset
   `*, ::before, ::after { margin: 0 }` do styles.css do tema anula e a caixa
   vai para o canto superior esquerdo. */
.soulreviews-lightbox {
  background: hsl(0 0% 100%);
  border: 0;
  border-radius: var(--soulreviews-radius-box, 0);
  color: hsl(180 6% 6%);
  height: min(56rem, calc(100vh - 2rem));
  inset: 0;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  padding: 0;
  width: 72rem;
}

.soulreviews-lightbox::backdrop {
  background: hsl(0 0% 0% / 60%);
}

.soulreviews-lightbox__body {
  box-sizing: border-box;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) 18rem;
  height: 100%;
  padding: 2rem;
}

.soulreviews-lightbox__media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  min-width: 0;
}

.soulreviews-lightbox__stage {
  align-items: center;
  background: hsl(0 0% 96%);
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem;
}

.soulreviews-lightbox__image,
.soulreviews-lightbox__video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* O `display: block` acima venceria o `hidden`: foto e vídeo dividem o palco
   e só um aparece por vez. */
.soulreviews-lightbox__image[hidden],
.soulreviews-lightbox__video[hidden] {
  display: none;
}

/* Faixa de miniaturas, com anterior/próxima nas pontas. */
.soulreviews-lightbox__strip {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.soulreviews-lightbox__thumbs {
  display: flex;
  flex: 1 1 auto;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  padding: 0.1875rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.soulreviews-lightbox__thumbs::-webkit-scrollbar {
  display: none;
}

.soulreviews-lightbox__thumbs > li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: auto;
}

.soulreviews-lightbox .soulreviews-lightbox__thumb {
  background: hsl(0 0% 96%);
  border: 0;
  border-radius: var(--soulreviews-radius-thumb, 0);
  cursor: pointer;
  display: block;
  height: 3rem;
  opacity: 0.7;
  outline: 2px solid transparent;
  outline-offset: 1px;
  overflow: hidden;
  padding: 0;
  width: 3rem;
}

.soulreviews-lightbox .soulreviews-lightbox__thumb:hover {
  opacity: 1;
}

.soulreviews-lightbox .soulreviews-lightbox__thumb.is-current {
  opacity: 1;
  outline-color: hsl(180 6% 6%);
}

.soulreviews-lightbox__thumb img,
.soulreviews-lightbox__thumb video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Miniatura de vídeo: primeiro quadro do MP4 com o play por cima. O clique é
   do botão, nunca do <video> sem controles. */
.soulreviews-lightbox .soulreviews-lightbox__thumb--video {
  position: relative;
}

.soulreviews-lightbox__thumb video {
  background: hsl(0 0% 12%);
  pointer-events: none;
}

.soulreviews-lightbox__thumb-play {
  align-items: center;
  background: hsl(0 0% 0% / 55%);
  border-radius: 50%;
  color: hsl(0 0% 100%);
  display: flex;
  font-size: 0.5rem;
  height: 1.25rem;
  justify-content: center;
  left: 50%;
  padding-left: 0.0625rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.25rem;
}

.soulreviews-lightbox .soulreviews-lightbox__step,
.soulreviews-lightbox .soulreviews-lightbox__close {
  align-items: center;
  background: none;
  border: 0;
  color: hsl(180 6% 6%);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 1.125rem;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}

.soulreviews-lightbox .soulreviews-lightbox__step:hover {
  color: hsl(180 2% 34%);
}

.soulreviews-lightbox .soulreviews-lightbox__close {
  color: hsl(180 2% 34%);
  font-size: 1.25rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 2.5rem;
  z-index: 1;
}

.soulreviews-lightbox .soulreviews-lightbox__close:hover {
  color: hsl(180 6% 6%);
}

/* Foto que não está na galeria abre sozinha: sem faixa nem setas. */
.soulreviews-lightbox.is-single .soulreviews-lightbox__strip {
  display: none;
}

.soulreviews-lightbox__step:focus-visible,
.soulreviews-lightbox__close:focus-visible,
.soulreviews-lightbox__thumb:focus-visible {
  outline: 2px solid hsl(210 100% 60%);
  outline-offset: 2px;
}

/* A posição é dita ao leitor de tela; na tela, a miniatura marcada já diz. */
.soulreviews-lightbox__counter {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Avaliação ao lado: texto em cima, "Útil" no rodapé da coluna. */
.soulreviews-lightbox__review {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-top: 1rem;
}

.soulreviews-lightbox__review-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.soulreviews-lightbox .soulreviews-item--compact {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-size: var(--size-13, 0.8125rem);
}

.soulreviews-lightbox .soulreviews-item--compact .soulreviews-item__actions {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 1rem;
}

/* Com a página travada atrás do visualizador, a rolagem fica só nele. */
html.soulreviews-lightbox-open {
  overflow: hidden;
}

@media only screen and (width <= 770px) {
  .soulreviews-lightbox {
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    width: 100vw;
  }

  .soulreviews-lightbox__body {
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 3rem 1rem 1rem;
  }

  .soulreviews-lightbox__review {
    max-height: 35vh;
    padding-top: 0;
  }
}

/* ==========================================================================
   Formulário em duas etapas: produto → vendedor (form.phtml)
   ========================================================================== */

/* `hidden` controla as etapas; o `display` de `.button` do tema não pode vencê-lo. */
.soulreviews-form [hidden] {
  display: none;
}

.soulreviews-form__parts {
  counter-reset: soulreviews-part;
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.soulreviews-form__parts-item {
  align-items: center;
  border-bottom: 3px solid hsl(0 0% 88%);
  color: hsl(180 2% 34%);
  counter-increment: soulreviews-part;
  display: flex;
  flex: 1;
  font-size: var(--size-14, 0.875rem);
  font-weight: 700;
  gap: 0.5rem;
  padding: 0 0 0.5rem;
}

.soulreviews-form__parts-item::before {
  align-items: center;
  background: hsl(0 0% 88%);
  border-radius: 50%;
  color: hsl(180 6% 6%);
  content: counter(soulreviews-part);
  display: inline-flex;
  font-size: 0.75rem;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
}

.soulreviews-form__parts-item.is-current {
  border-color: var(--review-icon-color, hsl(37 91% 55%));
  color: hsl(180 6% 6%);
}

.soulreviews-form__parts-item.is-current::before {
  background: var(--review-icon-color, hsl(37 91% 55%));
}

.soulreviews-form__seller-hint {
  color: hsl(180 2% 34%);
  font-size: var(--size-13, 0.8125rem);
  margin: 0 0 1rem;
}

.soulreviews-form__seller .soulreviews-form__legend:focus {
  outline: none;
}

.soulreviews-form__part-actions {
  margin: 1.5rem 0 0;
}

.soulreviews-form .soulreviews-form__next {
  font-size: var(--size-16, 1rem);
  min-height: 3rem;
  min-width: 14rem;
  padding: 0.75rem 2rem;
}

.soulreviews-form__back {
  background: none;
  border: 0;
  color: hsl(180 6% 6%);
  cursor: pointer;
  font-size: var(--size-14, 0.875rem);
  margin: 0 1rem 0 0;
  padding: 0.5rem 0;
  text-decoration: underline;
}

/* ==========================================================================
   Card do vendedor (vendor/card.phtml)
   ==========================================================================

   Na PDP é uma faixa na largura toda, abaixo da galeria e da caixa de compra:
   as duas colunas terminam quase juntas, e um card na coluna da direita
   abriria um vão embaixo da galeria. Zonas em flex no desktop (a que não tem
   conteúdo — médias de vendedor novo — some sem deixar buraco), duas linhas no
   intermediário e um card empilhado no celular. Os links repetem a cor no
   hover porque o tema imprime `a:hover { color: <link> }` no <head>. */

.soulreviews-seller-slot:empty {
  display: none;
}

.soulreviews-seller-card {
  align-items: center;
  background: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 90%);
  border-radius: var(--soulreviews-radius-box, 0.5rem);
  box-sizing: border-box;
  color: hsl(180 6% 6%);
  display: flex;
  gap: 1rem 2rem;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  width: 100%;
}

.soulreviews-seller-card__identity {
  align-items: center;
  display: flex;
  flex: 1 1 16rem;
  gap: 0.875rem;
  min-width: 0;
}

.soulreviews-seller-card--shop .soulreviews-seller-card__reputation {
  flex: 1 1 14rem;
}

.soulreviews-seller-card__logo {
  align-items: center;
  background: hsl(0 0% 96%);
  border: 1px solid hsl(0 0% 90%);
  border-radius: 50%;
  color: hsl(180 6% 6%);
  display: flex;
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 700;
  height: 3.5rem;
  justify-content: center;
  overflow: hidden;
  width: 3.5rem;
}

.soulreviews-seller-card__logo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.soulreviews-seller-card__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.soulreviews-seller-card__eyebrow {
  color: hsl(180 2% 40%);
  font-size: var(--size-12, 0.75rem);
}

.soulreviews-seller-card__name,
.soulreviews-seller-card__name:hover,
.soulreviews-seller-card__name:focus,
.soulreviews-seller-card__name:visited {
  color: hsl(180 6% 6%);
  font-size: var(--size-18, 1.125rem);
  font-weight: 700;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soulreviews-seller-card__name:hover {
  text-decoration: underline;
}

.soulreviews-seller-card__reputation {
  display: flex;
  flex: 0 1 14rem;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.soulreviews-seller-card__level {
  font-size: var(--size-14, 0.875rem);
  font-weight: 700;
}

.soulreviews-seller-card__level--top,
.soulreviews-seller-card__level--good {
  color: hsl(145 63% 30%);
}

.soulreviews-seller-card__level--regular,
.soulreviews-seller-card__level--new {
  color: hsl(180 2% 34%);
}

/* Termômetro: cada faixa clara; a do nível vigente, na cor cheia. */
.soulreviews-seller-card__thermometer {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(5, 1fr);
  max-width: 14rem;
}

.soulreviews-seller-card__thermometer > span {
  border-radius: 0.125rem;
  height: 0.375rem;
}

.soulreviews-seller-card__thermometer > span:nth-child(1) {
  background: hsl(0 85% 92%);
}

.soulreviews-seller-card__thermometer > span:nth-child(2) {
  background: hsl(25 90% 90%);
}

.soulreviews-seller-card__thermometer > span:nth-child(3) {
  background: hsl(50 90% 86%);
}

.soulreviews-seller-card__thermometer > span:nth-child(4) {
  background: hsl(90 50% 88%);
}

.soulreviews-seller-card__thermometer > span:nth-child(5) {
  background: hsl(140 45% 86%);
}

.soulreviews-seller-card__thermometer > span:nth-child(1).is-current {
  background: hsl(0 72% 51%);
}

.soulreviews-seller-card__thermometer > span:nth-child(2).is-current {
  background: hsl(25 90% 52%);
}

.soulreviews-seller-card__thermometer > span:nth-child(3).is-current {
  background: hsl(45 95% 50%);
}

.soulreviews-seller-card__thermometer > span:nth-child(4).is-current {
  background: hsl(90 55% 45%);
}

.soulreviews-seller-card__thermometer > span:nth-child(5).is-current {
  background: hsl(145 63% 36%);
}

.soulreviews-seller-card__tagline {
  color: hsl(180 2% 40%);
  font-size: var(--size-13, 0.8125rem);
}

/* Nota: número grande, estrelas e contagem embaixo. */
.soulreviews-seller-card__score {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.25rem;
}

.soulreviews-seller-card__rating,
.soulreviews-seller-card__rating:hover,
.soulreviews-seller-card__rating:focus,
.soulreviews-seller-card__rating:visited {
  align-items: center;
  color: hsl(180 6% 6%);
  display: flex;
  gap: 0.625rem;
  text-decoration: none;
}

.soulreviews-seller-card__rating-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.soulreviews-seller-card__rating-stars {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.soulreviews-seller-card__rating-stars .asr-star-wrap i {
  font-size: var(--size-14, 0.875rem);
}

.soulreviews-seller-card__rating-count {
  color: hsl(180 2% 40%);
  font-size: var(--size-13, 0.8125rem);
}

.soulreviews-seller-card__rating:hover .soulreviews-seller-card__rating-count {
  text-decoration: underline;
}

.soulreviews-seller-card__no-rating,
.soulreviews-seller-card__sales {
  color: hsl(180 2% 40%);
  font-size: var(--size-13, 0.8125rem);
  max-width: 12rem;
}

/* Médias de entrega, embalagem e atendimento. */
.product-detail .pd-content .soulreviews-seller-card ul li,
.soulreviews-seller-card__traits > li {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  text-align: center;
  width: auto;
}

.soulreviews-seller-card__traits {
  display: flex;
  flex: 1 1 auto;
  gap: 1.25rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.soulreviews-seller-card__trait-value {
  font-size: var(--size-18, 1.125rem);
  font-weight: 700;
}

.soulreviews-seller-card__trait-label {
  color: hsl(180 2% 40%);
  font-size: var(--size-12, 0.75rem);
}

.soulreviews-seller-card__actions {
  align-items: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: auto;
}

.soulreviews-seller-card__button,
.soulreviews-seller-card__button:hover,
.soulreviews-seller-card__button:focus,
.soulreviews-seller-card__button:visited {
  background: color-mix(in srgb, var(--link_color, hsl(160 41% 45%)) 12%, hsl(0 0% 100%));
  border-radius: var(--soulreviews-radius-button, 0.375rem);
  color: var(--link_color, hsl(160 41% 35%));
  font-size: var(--size-14, 0.875rem);
  font-weight: 700;
  padding: 0.625rem 1rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.soulreviews-seller-card__button:hover {
  background: color-mix(in srgb, var(--link_color, hsl(160 41% 45%)) 20%, hsl(0 0% 100%));
}

.soulreviews-seller-card__link,
.soulreviews-seller-card__link:hover,
.soulreviews-seller-card__link:focus,
.soulreviews-seller-card__link:visited {
  color: var(--link_color, hsl(160 41% 35%));
  font-size: var(--size-13, 0.8125rem);
  text-align: center;
}

.soulreviews-seller-card a:focus-visible {
  outline: 2px solid hsl(210 100% 60%);
  outline-offset: 2px;
}

/* Modelo "faixa compacta": uma linha, sem termômetro, frase nem médias. */
.soulreviews-seller-card--compact {
  gap: 0.75rem 1.5rem;
  padding: 0.75rem 1.25rem;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__logo {
  font-size: 1.125rem;
  height: 2.5rem;
  width: 2.5rem;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__eyebrow,
.soulreviews-seller-card--compact .soulreviews-seller-card__thermometer,
.soulreviews-seller-card--compact .soulreviews-seller-card__tagline,
.soulreviews-seller-card--compact .soulreviews-seller-card__traits,
.soulreviews-seller-card--compact .soulreviews-seller-card__link {
  display: none;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__reputation {
  flex: 0 0 auto;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__rating-value {
  font-size: 1.25rem;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__rating-stars {
  align-items: center;
  flex-direction: row;
  gap: 0.375rem;
}

.soulreviews-seller-card--compact .soulreviews-seller-card__button {
  padding: 0.5rem 0.875rem;
}

/* Modelo "cartões": o vendedor à esquerda; nota e médias em caixas ao lado. */
.soulreviews-seller-card--tiles {
  display: grid;
  gap: 0.5rem 1.25rem;
  grid-template-areas:
    'who score traits actions'
    'rep score traits actions';
  grid-template-columns: minmax(15rem, 1fr) auto minmax(0, 2fr) auto;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__identity {
  grid-area: who;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__reputation {
  grid-area: rep;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__score {
  grid-area: score;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__traits {
  grid-area: traits;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__actions {
  grid-area: actions;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__score,
.soulreviews-seller-card--tiles .soulreviews-seller-card__traits > li {
  align-items: center;
  align-self: stretch;
  border: 1px solid hsl(0 0% 90%);
  border-radius: var(--soulreviews-radius-box, 0.5rem);
  justify-content: center;
  padding: 0.75rem 1rem;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__rating {
  flex-direction: column;
  gap: 0.25rem;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__rating-stars {
  align-items: center;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__traits {
  align-self: stretch;
  gap: 0.75rem;
  justify-content: flex-start;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__traits > li {
  flex: 1 1 0;
  min-width: 6rem;
}

.soulreviews-seller-card--tiles .soulreviews-seller-card__trait-value {
  font-size: 1.5rem;
}

/* Intermediário: quem vende e as ações em cima; reputação, nota e médias embaixo. */
@media only screen and (width <= 1024px) {
  .soulreviews-seller-card {
    flex-wrap: wrap;
  }

  .soulreviews-seller-card__identity {
    flex-basis: 60%;
  }

  .soulreviews-seller-card__actions {
    order: 1;
  }

  .soulreviews-seller-card__reputation,
  .soulreviews-seller-card__score,
  .soulreviews-seller-card__traits {
    flex: 1 1 12rem;
    order: 2;
  }

  .soulreviews-seller-card--shop .soulreviews-seller-card__actions {
    align-items: center;
    flex-basis: 100%;
    flex-direction: row;
    order: 3;
  }

  .soulreviews-seller-card--tiles {
    grid-template-areas:
      'who actions'
      'rep rep'
      'score traits';
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* Celular: card empilhado, ações no fim. */
@media only screen and (width <= 600px) {
  .soulreviews-seller-card {
    align-items: stretch;
    flex-direction: column;
    padding: 1rem;
  }

  .soulreviews-seller-card__identity,
  .soulreviews-seller-card__reputation,
  .soulreviews-seller-card--shop .soulreviews-seller-card__reputation,
  .soulreviews-seller-card__score,
  .soulreviews-seller-card__traits {
    flex: 0 0 auto;
  }

  .soulreviews-seller-card__actions,
  .soulreviews-seller-card--shop .soulreviews-seller-card__actions {
    align-items: stretch;
    flex-direction: column;
    margin-left: 0;
    order: 3;
  }

  .soulreviews-seller-card__traits {
    justify-content: space-between;
  }

  .soulreviews-seller-card__thermometer {
    max-width: none;
  }

  .soulreviews-seller-card--tiles {
    grid-template-areas: 'who' 'rep' 'score' 'traits' 'actions';
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Reputação no nome do vendedor (vendor/tooltip.phtml)
   ==========================================================================

   O tema envolve o nome da caixa de compra e o painel em
   `.soulreviews-seller-tip-anchor`; o painel abre no hover e no foco, sem JS.
   Tudo é <span> (o nome fica dentro de `.seller-info`, inline), então cada
   parte declara o próprio `display`. */

/* Fica inline: o envoltório existe também onde não há painel (grid e carrinho
   do vendorlink) e não pode mudar a quebra de linha do nome. */
.soulreviews-seller-tip-anchor {
  position: relative;
}

.soulreviews-seller-tip {
  background: hsl(0 0% 100%);
  border: 1px solid hsl(0 0% 88%);
  border-radius: var(--soulreviews-radius-box, 0.5rem);
  box-shadow: 0 0.5rem 1.5rem hsl(0 0% 0% / 15%);
  box-sizing: border-box;
  color: hsl(180 6% 6%);
  display: none;
  flex-direction: column;
  font-size: var(--size-13, 0.8125rem);
  font-weight: 400;
  gap: 0.5rem;
  left: 0;
  line-height: 1.4;
  margin-top: 0.5rem;
  max-width: calc(100vw - 2rem);
  padding: 0.875rem 1rem;
  position: absolute;
  text-align: left;
  text-transform: none;
  top: 100%;
  white-space: normal;
  width: 20rem;
  z-index: 60;
}

/* Ponte invisível sobre o vão entre o nome e o painel: sem ela, o mouse sai do
   nome na margem e o painel fecha antes de chegar nele. */
.soulreviews-seller-tip::before {
  content: '';
  height: 0.5rem;
  left: 0;
  position: absolute;
  right: 0;
  top: -0.5rem;
}

.soulreviews-seller-tip-anchor:hover .soulreviews-seller-tip,
.soulreviews-seller-tip-anchor:focus-within .soulreviews-seller-tip {
  display: flex;
}

/* Lista de ofertas: o envoltório abraça o link da loja (logo e nome), que é bloco. */
.soulreviews-seller-tip-anchor--offer {
  display: block;
}

/* Painel enxuto da lista de ofertas: nome, selo de destaque, nota e médias. */
.soulreviews-seller-tip--compact {
  gap: 0.375rem;
  padding: 0.75rem 0.875rem;
  width: 16rem;
}

.soulreviews-seller-tip--compact .soulreviews-seller-tip__rating-value {
  font-size: 1rem;
}

.soulreviews-seller-tip__head,
.soulreviews-seller-tip__rating,
.soulreviews-seller-tip__review-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.soulreviews-seller-tip__head {
  justify-content: space-between;
}

.soulreviews-seller-tip__name {
  font-size: var(--size-14, 0.875rem);
  font-weight: 700;
}

.soulreviews-seller-tip .soulreviews-seller-card__thermometer {
  max-width: none;
}

.soulreviews-seller-tip__tagline,
.soulreviews-seller-tip__muted {
  color: hsl(180 2% 40%);
}

.soulreviews-seller-tip__rating-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.soulreviews-seller-tip__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
}

.soulreviews-seller-tip__review {
  border-top: 1px solid hsl(0 0% 92%);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
}

.soulreviews-seller-tip__review-text {
  display: block;
}

.soulreviews-seller-tip__link,
.soulreviews-seller-tip__link:hover,
.soulreviews-seller-tip__link:focus,
.soulreviews-seller-tip__link:visited {
  color: var(--link_color, hsl(160 41% 35%));
  font-weight: 700;
}