/* Avaliações de clientes — página do produto. Desenho baseado no bloco de avaliações de sualojapopular.com,
   com a paleta da loja (variáveis --ej-* do tema; há valores de recurso para o caso de o tema mudar). */

.ej-av {
	--av-estrela: var(--ej-yellow, #fbb32b);
	--av-estrela-off: #e6e6e6;
	--av-ink: var(--ej-ink, #0b2e22);
	--av-texto: var(--ej-text, #3d4a45);
	--av-mudo: var(--ej-muted, #6b7a74);
	--av-verde: var(--ej-green, #035f3f);
	--av-verde-escuro: var(--ej-green-darker, #012a1d);
	--av-vermelho: var(--ej-red, #e41a21);
	--av-amarelo: var(--ej-yellow, #fbb32b);
	--av-linha: #e2e2e2;
	--av-cartao-raio: 15px;
	--av-gap: 20px;
	clear: both;
	color: var(--av-texto);
	font-size: 1rem;
	line-height: 1.5;
	margin: 44px 0 0;
	scroll-margin-top: 90px;
}
.ej-av *, .ej-av *::before, .ej-av *::after { box-sizing: border-box; }
.ej-av img { display: block; height: auto; max-width: 100%; }
.ej-av button { font-family: inherit; }
.ej-av__titulo { color: var(--av-ink); font-size: 1.35rem; font-weight: 900; margin: 0 0 18px; }

/* Reset dos botões que o Storefront estiliza globalmente. */
.ej-av__barra, .ej-av__util-btn, .ej-av__foto, .ej-av__foto-mini, .ej-av__seta, .ej-av__form-fechar, .ej-av__preview-x {
	background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; line-height: normal; margin: 0; padding: 0; text-transform: none;
}

/* ---- estrelas ---- */
.ej-av__estrelas { display: inline-block; line-height: 0; position: relative; vertical-align: middle; }
.ej-av__estrelas-base, .ej-av__estrelas-topo { display: inline-flex; gap: 2px; white-space: nowrap; }
.ej-av__estrelas-base svg { fill: var(--av-estrela-off); }
.ej-av__estrelas-topo { left: 0; overflow: hidden; position: absolute; top: 0; }
.ej-av__estrelas-topo svg { fill: var(--av-estrela); }
.ej-av__estrelas svg { display: block; flex: 0 0 auto; height: 14px; width: 14px; }
.ej-av__estrelas--lg svg { height: 17px; width: 17px; }

/* ---- resumo ---- */
.ej-av__sumario { align-items: flex-start; display: flex; flex-direction: column; gap: 25px; padding-bottom: 20px; }
.ej-av__nota { align-items: center; display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; min-width: 190px; text-align: center; }
.ej-av__nota-grande { color: var(--av-ink); font-size: 2.6em; font-weight: 800; line-height: 1.2; }
.ej-av__nota-total { color: var(--av-mudo); font-size: .93em; }
.ej-av__btn-escrever, .ej-av__btn-enviar {
	align-items: center; background: var(--av-amarelo); border: 0; border-radius: 10px; box-shadow: none; color: var(--av-ink); cursor: pointer;
	display: inline-flex; font-size: 1em; font-weight: 700; justify-content: center; line-height: 1.2; margin: 6px 0 0; min-height: 38px; padding: 9px 22px; text-decoration: none; transition: filter .2s ease;
}
.ej-av__btn-escrever:hover, .ej-av__btn-escrever:focus, .ej-av__btn-enviar:hover, .ej-av__btn-enviar:focus { background: var(--av-amarelo); color: var(--av-ink); filter: brightness(.94); }
.ej-av__barras { display: flex; flex: 1 1 260px; flex-direction: column; gap: 6px; min-width: 0; width: 100%; }
.ej-av__barra { align-items: center; cursor: pointer; display: flex; text-align: left; width: 100%; }
.ej-av__barra:hover .ej-av__barra-trilho { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.ej-av__barra--zero { cursor: default; opacity: .55; pointer-events: none; }
.ej-av__barra-nome { align-items: center; display: inline-flex; font-size: 14px; gap: 2px; padding-right: 9px; white-space: nowrap; }
.ej-av__barra-nome svg { fill: var(--av-estrela); height: 12px; width: 12px; }
.ej-av__barra-trilho { background: #efefef; border-radius: 8px; flex: 1 1 auto; height: 8px; min-width: 150px; overflow: hidden; }
.ej-av__barra-fill { background: var(--av-estrela); border-radius: 8px; display: block; height: 8px; }
.ej-av__barra-num { font-size: 13px; min-width: 25px; padding: 2px 0 2px 9px; text-align: center; }

/* ---- "Fotos de clientes" ---- */
.ej-av__fotos { flex: 0 0 auto; min-width: 0; }
.ej-av__fotos-titulo { color: var(--av-ink); font-size: 1.08em; font-weight: 700; margin: 5px 0; }
.ej-av__fotos-tira { display: flex; flex-wrap: wrap; gap: 10px; }
.ej-av__foto-mini { background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: zoom-in; flex: 0 0 auto; height: 80px; overflow: hidden; position: relative; width: 80px; }
.ej-av__foto-mini img { height: 100%; object-fit: cover; transition: transform .4s ease; width: 100%; }
.ej-av__foto-mini:hover img { transform: scale(1.05); }
.ej-av__foto-mais { background: rgba(0, 0, 0, .55); border-radius: 28px; color: #fff; font-size: 13px; font-weight: 700; left: 50%; padding: 2px 8px; position: absolute; top: 50%; transform: translate(-50%, -50%); }

/* ---- filtros ---- */
.ej-av__filtros { align-items: center; border-top: 1px solid #ececec; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 12px 0; }
.ej-av__info { color: var(--av-mudo); font-size: .93em; }
.ej-av__selects { display: flex; flex-wrap: wrap; gap: 8px; }
.ej-av__select {
	appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 9px center; background-repeat: no-repeat; background-size: 14px; border: 1px solid #e7e7e7; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	color: var(--av-texto); cursor: pointer; font-size: 14px; height: 36px; line-height: 1.2; padding: 4px 30px 4px 12px;
}

/* ---- grelha (colunas montadas pelo JS, em ordem de leitura) ---- */
.ej-av__grelha { align-items: flex-start; display: flex; gap: var(--av-gap); }
.ej-av__col { flex: 1 1 0; min-width: 0; }
.ej-av__grelha:empty { display: none; }
.ej-av__cartao {
	background: #fff; border: 1px solid #ddd; border-radius: var(--av-cartao-raio); margin: 0 0 15px; min-height: 100px; overflow: hidden; padding: 0 0 8px; transition: box-shadow .3s ease; width: 100%;
}
.ej-av__cartao:hover { box-shadow: 1px 1px 5px rgba(0, 0, 0, .16); }
.ej-av__corpo { padding: 0 20px; }
.ej-av__topo { align-items: center; display: flex; gap: 8px; margin-top: 12px; }
.ej-av__avatar { border-radius: 50%; color: #fff; flex: 0 0 auto; font-size: 16px; font-weight: 700; height: 30px; line-height: 30px; text-align: center; text-transform: uppercase; width: 30px; }
.ej-av__quem { min-width: 0; }
.ej-av__nome { color: var(--av-ink); font-size: 17px; font-weight: 700; line-height: 1.25; }
.ej-av__verif { cursor: default; display: inline-flex; position: relative; vertical-align: -1px; }
.ej-av__verif svg { display: block; fill: #10b981; height: 14px; width: 14px; }
.ej-av__tooltip { background: #fff; border: 1px solid #ebebeb; border-radius: 4px; bottom: calc(100% + 6px); box-shadow: 1px 1px 3px #e6e6e6; color: #4a4949; font-size: .8em; font-weight: 500; left: 50%; opacity: 0; padding: 3px 10px; position: absolute; transform: translateX(-50%); transition: opacity .2s ease; visibility: hidden; white-space: nowrap; z-index: 3; }
.ej-av__verif:hover .ej-av__tooltip, .ej-av__verif:focus .ej-av__tooltip { opacity: 1; visibility: visible; }
.ej-av__data { color: var(--av-mudo); font-size: .93em; }
.ej-av__meta { align-items: flex-start; display: flex; flex-direction: column; gap: 3px; margin: 6px 0 9px; }
.ej-av__titulo-c { color: var(--av-verde); font-size: 17px; font-weight: 700; margin: 8px 0 4px; }
.ej-av__texto { margin: 4px 0 0; overflow-wrap: anywhere; }
.ej-av__texto p { margin: 0 0 8px; }
.ej-av__texto p:last-child { margin-bottom: 0; }
.ej-av__resposta { background: var(--ej-green-tint, #f2f7f4); border-left: 3px solid var(--av-verde); border-radius: 0 8px 8px 0; font-size: .93em; margin: 10px 0 0; padding: 8px 12px; }
.ej-av__resposta strong { color: var(--av-verde); display: block; font-size: .9em; margin-bottom: 2px; }
.ej-av__resposta p { margin: 0 0 6px; }
.ej-av__resposta p:last-child { margin-bottom: 0; }
.ej-av__util { align-items: center; color: var(--av-mudo); display: flex; flex-wrap: nowrap; font-size: .93em; gap: 6px; margin: 12px 0 4px; }
.ej-av__util-txt { flex: 1 1 auto; min-width: 0; }
.ej-av__util-curto { display: none; }
.ej-av__util-btn { align-items: center; border-radius: 6px; color: var(--av-mudo); cursor: pointer; display: inline-flex; padding: 3px 5px; transition: color .15s ease, transform .15s ease; }
.ej-av__util-btn svg { display: block; fill: currentColor; height: 16px; width: 16px; }
.ej-av__util-btn:hover { background: #f3f3f3; color: var(--av-ink); }
.ej-av__util-btn.is-on[data-voto="sim"] { color: var(--av-verde); }
.ej-av__util-btn.is-on[data-voto="nao"] { color: var(--av-vermelho); }
.ej-av__util-btn.is-on svg { animation: ej-av-pop .25s ease; }
@keyframes ej-av-pop { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* fotos dentro do cartão: carrossel com scroll-snap; setas e contador só com mais de uma */
.ej-av__fotos-cartao { background: #f4f4f4; position: relative; }
.ej-av__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ej-av__track::-webkit-scrollbar { display: none; }
.ej-av__foto { cursor: zoom-in; display: block; flex: 0 0 100%; scroll-snap-align: start; width: 100%; }
.ej-av__foto img { max-height: 400px; object-fit: cover; width: 100%; }
.ej-av__seta { align-items: center; background: rgba(0, 0, 0, .45); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 26px; height: 32px; justify-content: center; line-height: 1; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: opacity .2s ease; width: 32px; }
.ej-av__seta--ant { left: 8px; }
.ej-av__seta--seg { right: 8px; }
.ej-av__cartao:hover .ej-av__seta, .ej-av__seta:focus-visible { opacity: 1; }
@media (hover: none) { .ej-av__seta { opacity: 1; } }
.ej-av__conta { background: rgba(0, 0, 0, .5); border-radius: 12px; bottom: 8px; color: #fff; font-size: 12px; padding: 2px 8px; position: absolute; right: 8px; }

/* ---- carregar mais / vazio ---- */
.ej-av__mais { text-align: center; }
.ej-av__btn-mais { background: #fff; border: 1px solid #d6d4ce; border-radius: 6px; box-shadow: none; color: var(--av-ink); cursor: pointer; font-size: 1em; font-weight: 600; margin: 24px 0 0; min-width: 160px; padding: 9px 22px; text-align: center; text-transform: none; }
.ej-av__btn-mais:hover { background: #f6f6f6; color: var(--av-ink); }
.ej-av__btn-mais[disabled] { cursor: progress; opacity: .6; }
.ej-av__btn-mais[hidden], .ej-av__sem[hidden], .ej-av__painel[hidden], .ej-av__sucesso[hidden], .ej-av__erro[hidden], .ej-av__form[hidden] { display: none; }
.ej-av__sem { color: var(--av-mudo); font-size: .93em; padding: 20px 0; text-align: center; }
.ej-av__vazio { align-items: center; background: #fff; border: 1px solid #ddd; border-radius: var(--av-cartao-raio); display: flex; flex-direction: column; gap: 10px; padding: 30px 20px; text-align: center; }
.ej-av__vazio p { margin: 0; }
.ej-av__aviso-login { color: var(--av-mudo); font-size: .93em; margin: 16px 0 0; }

/* ---- formulário ---- */
.ej-av__painel { border-top: 1px solid #ececec; margin: 30px 0 0; padding-top: 24px; }
.ej-av__form { max-width: 640px; }
.ej-av__form-cab { align-items: center; display: flex; justify-content: space-between; margin: 0 0 14px; }
.ej-av__form-titulo { color: var(--av-ink); font-size: 1.15em; font-weight: 800; }
.ej-av__form-fechar { color: var(--av-mudo); cursor: pointer; font-size: 26px; line-height: 1; padding: 0 6px; }
.ej-av__form-fechar:hover { color: var(--av-ink); }
.ej-av__form-nota { background: var(--ej-yellow-tint, #fff7e6); border-radius: 8px; font-size: .93em; margin: 0 0 14px; padding: 8px 12px; }
.ej-av__linha { margin: 0 0 14px; }
.ej-av__linha--2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.ej-av__linha p, .ej-av__linha--2 p { margin: 0; }
.ej-av__form label { color: var(--av-ink); display: block; font-size: .93em; font-weight: 700; margin: 0 0 4px; }
.ej-av__form label small { color: var(--av-mudo); font-weight: 500; }
.ej-av__obrig { color: var(--av-vermelho); }
.ej-av__form input[type="text"], .ej-av__form input[type="email"], .ej-av__form textarea {
	background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: none; color: var(--av-texto); font-family: inherit; font-size: 1em; padding: 9px 12px; width: 100%;
}
.ej-av__form input:focus, .ej-av__form textarea:focus { border-color: var(--av-verde); box-shadow: 0 0 0 3px rgba(3, 95, 63, .12); outline: none; }
.ej-av__form textarea { min-height: 110px; resize: vertical; }
.ej-av__estrelas-form { background: none; border: 0; margin: 0 0 16px; min-width: 0; padding: 0; } /* o Storefront dá fundo cinzento e padding aos fieldset */
.ej-av__estrelas-form legend { color: var(--av-ink); font-size: .93em; font-weight: 700; margin: 0 0 6px; padding: 0; }
.ej-av__estrelas-grupo { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.ej-av__estrelas-grupo input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.ej-av__estrelas-grupo label { cursor: pointer; display: block; line-height: 0; margin: 0; }
.ej-av__estrelas-grupo label svg { fill: var(--av-estrela-off); height: 30px; transition: fill .1s ease, transform .1s ease; width: 30px; }
.ej-av__estrelas-grupo label:hover svg { transform: scale(1.1); }
.ej-av__estrelas-grupo input:checked ~ label svg, .ej-av__estrelas-grupo label:hover svg, .ej-av__estrelas-grupo label:hover ~ label svg { fill: var(--av-estrela); }
.ej-av__estrelas-grupo input:focus-visible + label svg { outline: 2px solid var(--av-verde); outline-offset: 2px; }
.ej-av__btn-fotos { align-items: center; background: var(--ej-green-tint, #f2f7f4); border: 1px dashed var(--av-verde); border-radius: 8px; color: var(--av-verde); cursor: pointer; display: inline-flex; font-size: .95em; font-weight: 700; gap: 6px; margin: 0; padding: 9px 14px; }
.ej-av__btn-fotos:hover { background: #e6f0eb; }
.ej-av__btn-fotos svg { fill: currentColor; height: 18px; width: 18px; }
.ej-av__btn-fotos small { color: var(--av-mudo); font-weight: 500; }
.ej-av__btn-fotos input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.ej-av__fotos-estado { color: var(--av-mudo); display: block; font-size: .9em; margin-top: 6px; min-height: 1.2em; }
.ej-av__previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ej-av__preview { border: 1px solid #ddd; border-radius: 6px; height: 76px; overflow: hidden; position: relative; width: 76px; }
.ej-av__preview img { height: 100%; object-fit: cover; width: 100%; }
.ej-av__preview span { background: rgba(0, 0, 0, .55); bottom: 0; color: #fff; font-size: 10px; left: 0; padding: 1px 4px; position: absolute; }
.ej-av__preview-x { background: rgba(0, 0, 0, .6); border-radius: 50%; color: #fff; cursor: pointer; font-size: 16px; height: 22px; line-height: 22px; position: absolute; right: 3px; text-align: center; top: 3px; width: 22px; }
.ej-av__fotos-dica { color: var(--av-mudo); display: block; font-size: .8em; margin-top: 6px; }
.ej-av__hp { left: -9999px; position: absolute; top: -9999px; }
.ej-av__erro { background: #fdecec; border-radius: 6px; color: #9b1c1c; font-size: .93em; margin: 0 0 12px; padding: 9px 12px; }
.ej-av__consent { color: var(--av-mudo); font-size: .82em; margin: 0 0 12px; }
.ej-av__acoes { margin: 0; }
.ej-av__btn-enviar { min-width: 200px; }
.ej-av__btn-enviar[disabled] { cursor: progress; opacity: .7; }
.ej-av__sucesso { background: var(--ej-green-tint, #f2f7f4); border-left: 4px solid var(--av-verde); border-radius: 8px; color: var(--av-verde-escuro); font-weight: 600; margin: 0; padding: 12px 16px; }

/* ---- galeria (lightbox), filha de <body> ---- */
#ej-av-lb { background: #0b0d12; display: flex; flex-direction: column; inset: 0; position: fixed; touch-action: pan-y; z-index: 2147483600; }
#ej-av-lb[hidden] { display: none; }
.ej-av-lb__topo { align-items: center; color: #fff; display: flex; flex: 0 0 auto; font-size: 14px; justify-content: space-between; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
.ej-av-lb__btn { align-items: center; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 22px; height: 44px; justify-content: center; line-height: 1; padding: 0; width: 44px; }
.ej-av-lb__btn:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.ej-av-lb__palco { align-items: center; display: flex; flex: 1 1 auto; justify-content: center; min-height: 0; padding: 0 8px; position: relative; }
.ej-av-lb__img { max-height: 100%; max-width: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; user-select: none; }
#ej-av-lb.is-pronto .ej-av-lb__img { opacity: 1; }
.ej-av-lb__ant, .ej-av-lb__seg { font-size: 34px; height: 46px; position: absolute; top: 50%; transform: translateY(-50%); width: 46px; }
.ej-av-lb__ant { left: 14px; }
.ej-av-lb__seg { right: 14px; }
.ej-av-lb__ant[hidden], .ej-av-lb__seg[hidden] { display: none; }
.ej-av-lb__legenda { color: rgba(255, 255, 255, .85); flex: 0 0 auto; font-size: 14px; padding: 8px 16px 0; text-align: center; }
.ej-av-lb__legenda .ej-av__estrelas svg { height: 12px; width: 12px; }
.ej-av-lb__tira { display: flex; flex: 0 0 auto; gap: 6px; overflow-x: auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.ej-av-lb__tira::-webkit-scrollbar { display: none; }
.ej-av-lb__tira[hidden] { display: none; }
.ej-av-lb__thumb { background: none; border: 2px solid transparent; border-radius: 6px; cursor: pointer; flex: 0 0 auto; height: 56px; opacity: .6; overflow: hidden; padding: 0; width: 56px; }
.ej-av-lb__thumb img { height: 100%; object-fit: cover; width: 100%; }
.ej-av-lb__thumb.on { border-color: var(--ej-yellow, #fbb32b); opacity: 1; }
body.ej-av-lb-aberto { overflow: hidden !important; }

/* ---- ecrãs ---- */
@media (min-width: 750px) {
	.ej-av__sumario { align-items: center; flex-direction: row; gap: 30px; }
	.ej-av__fotos { max-width: 44%; }
}
@media (max-width: 749px) {
	.ej-av__grelha { gap: 10px; }
	/* cartões estreitos (2 colunas): texto curto para os botões não caírem para a linha seguinte */
	.ej-av__util-longo { display: none; }
	.ej-av__util-curto { display: inline; }
}
@media (max-width: 560px) {
	.ej-av__linha--2 { grid-template-columns: 1fr; }
}
@media (max-width: 449px) {
	.ej-av__foto-mini { height: 63px; width: 63px; }
	.ej-av__foto img { max-height: 280px; }
	.ej-av__btn-escrever { width: 100%; }
	.ej-av__corpo { padding: 0 13px; }
	.ej-av__topo { gap: 6px; margin-top: 10px; }
	.ej-av__nome, .ej-av__titulo-c { font-size: 15px; }
	.ej-av__cartao { font-size: .92em; }
	.ej-av__filtros { flex-direction: column; align-items: stretch; }
	.ej-av__selects { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ej-av__track { scroll-behavior: auto; }
	.ej-av__util-btn.is-on svg { animation: none; }
}