/* Página de produto do Conecta. A página é toda do Conecta: abre sem o tema,
   então este arquivo cuida também da base do documento, pela classe do body,
   que só ela imprime. O topo junta as fotos e o resumo da compra (nota, nome,
   preço das formas, opções, quantidade, compra, frete e compartilhar); embaixo
   vêm a descrição, as avaliações, as perguntas e os mais vendidos da mesma
   subcategoria. Os botões, a grade e o cartão de produto são os da vitrine, os
   títulos das seções são os da página inicial e as cores, as da marca do
   cabeçalho. O celular troca só os tokens, salvo o que muda de arranjo. */
:root {
    --solex-conecta-produto-fundo: var(--solex-conecta-cabecalho-marca-fundo, #f2f2f2);
    --solex-conecta-produto-superficie: var(--solex-conecta-cabecalho-marca-superficie, #ffffff);
    --solex-conecta-produto-texto: var(--solex-conecta-cabecalho-marca-texto, #000000);
    --solex-conecta-produto-texto-suave: var(--solex-conecta-cabecalho-marca-texto-suave, #4a4a4a);
    --solex-conecta-produto-borda: var(--solex-conecta-cabecalho-marca-borda, #d4d4d4);
    --solex-conecta-produto-borda-forte: var(--solex-conecta-cabecalho-marca-borda-forte, #8c8c8c);
    --solex-conecta-produto-sombra: var(--solex-conecta-cabecalho-marca-sombra, rgba(0, 0, 0, 0.08));
    --solex-conecta-produto-acao: var(--solex-conecta-cabecalho-marca-acao, #000000);
    --solex-conecta-produto-foco: var(--solex-conecta-cabecalho-marca-foco, #000000);
    --solex-conecta-produto-destaque: var(--solex-conecta-cabecalho-marca-destaque, #f2f2f2);
    --solex-conecta-produto-texto-destaque: var(--solex-conecta-cabecalho-marca-texto-destaque, #000000);
    --solex-conecta-produto-ok: var(--solex-conecta-cabecalho-marca-ok-texto, #047857);
    /* Os tons das páginas do checkout: o fundo da página a 40% sobre a
       superfície e a linha a 60%. */
    --solex-conecta-produto-pagina: color-mix(in srgb, var(--solex-conecta-produto-fundo) 40%, var(--solex-conecta-produto-superficie));
    --solex-conecta-produto-linha: color-mix(in srgb, var(--solex-conecta-produto-borda) 60%, var(--solex-conecta-produto-superficie));
    /* A opção escolhida é a da busca e da categoria: a cor de ação a 18% sobre
       a superfície, com o contorno na cor do texto. */
    --solex-conecta-produto-ativa: color-mix(in srgb, var(--solex-conecta-produto-acao) 18%, var(--solex-conecta-produto-superficie));
    --solex-conecta-produto-anel: color-mix(in srgb, var(--solex-conecta-produto-foco) 22%, transparent);
    --solex-conecta-produto-sombra-bloco: 0 1px 2px var(--solex-conecta-produto-sombra);
    --solex-conecta-produto-sombra-foco: 0 0 0 3px var(--solex-conecta-produto-anel);
    /* A estrela é a cor de ação da marca, como a nota do cartão da vitrine. */
    --solex-conecta-produto-estrela: var(--solex-conecta-produto-acao);
    /* O sinal de vídeo fica sobre a foto do vídeo, que pode ser clara ou
       escura: o véu escuro com o ícone branco aparece nas duas. */
    --solex-conecta-produto-veu: rgba(0, 0, 0, 0.6);
    --solex-conecta-produto-veu-texto: #ffffff;

    --solex-conecta-produto-fonte: 'Inter';
    --solex-conecta-produto-largura: 1180px;
    --solex-conecta-produto-margem-lateral: 20px;
    --solex-conecta-produto-respiro-pagina: 24px 0 48px;
    --solex-conecta-produto-vao-pagina: 16px;
    --solex-conecta-produto-vao-secoes: 40px;
    --solex-conecta-produto-vao-secao: 16px;
    --solex-conecta-produto-vao-cabeca: 12px 16px;
    --solex-conecta-produto-vao-titulo: 12px;
    --solex-conecta-produto-vao-trilha: 6px;
    /* As fotos ficam com a maior parte da largura; o resumo da compra, com o
       resto, no tamanho em que preço, opções e botões cabem sem apertar. */
    --solex-conecta-produto-colunas-topo: minmax(0, 7fr) minmax(0, 5fr);
    --solex-conecta-produto-vao-topo: 32px;
    --solex-conecta-produto-raio: 16px;
    --solex-conecta-produto-raio-controle: 12px;
    --solex-conecta-produto-raio-miniatura: 10px;
    --solex-conecta-produto-raio-etiqueta: 8px;
    --solex-conecta-produto-raio-circulo: 999px;
    --solex-conecta-produto-borda-largura: 1px;
    --solex-conecta-produto-borda-largura-forte: 1.5px;
    --solex-conecta-produto-foco-largura: 3px;
    --solex-conecta-produto-foco-recuo: 2px;
    --solex-conecta-produto-controle: 44px;
    --solex-conecta-produto-chip: 40px;
    /* O alvo de toque mínimo no celular. */
    --solex-conecta-produto-alvo-toque: 40px;
    --solex-conecta-produto-titulo-icone: 36px;

    --solex-conecta-produto-respiro-palco: 16px;
    --solex-conecta-produto-miniatura: 72px;
    --solex-conecta-produto-vao-miniaturas: 10px;
    --solex-conecta-produto-respiro-miniatura: 4px;
    --solex-conecta-produto-play: 30px;
    --solex-conecta-produto-respiro-resumo: 24px;
    --solex-conecta-produto-vao-resumo: 18px;
    --solex-conecta-produto-vao-resumo-topo: 6px 16px;
    --solex-conecta-produto-vao-nota: 6px;
    --solex-conecta-produto-vao-estrelas: 2px;
    --solex-conecta-produto-vao-preco: 4px;
    --solex-conecta-produto-vao-preco-linha: 2px 8px;
    --solex-conecta-produto-respiro-formas-abrir: 6px 0 0;
    --solex-conecta-produto-vao-formas-abrir: 6px;
    --solex-conecta-produto-respiro-formas: 14px 0 0;
    --solex-conecta-produto-margem-formas: 10px 0 0;
    --solex-conecta-produto-vao-formas: 14px;
    --solex-conecta-produto-vao-forma: 8px;
    --solex-conecta-produto-vao-grupo: 6px;
    --solex-conecta-produto-vao-condicoes: 6px;
    --solex-conecta-produto-respiro-condicao: 4px 8px;
    --solex-conecta-produto-vao-opcoes: 10px;
    --solex-conecta-produto-vao-opcoes-lista: 10px;
    --solex-conecta-produto-opcao-largura: 84px;
    --solex-conecta-produto-opcao-foto: 64px;
    --solex-conecta-produto-respiro-opcao: 8px 6px;
    /* O meio pixel a mais da borda da escolha sai do recuo, para a opção não
       mudar de tamanho. */
    --solex-conecta-produto-respiro-opcao-ativa: 7.5px 5.5px;
    --solex-conecta-produto-vao-opcao: 6px;
    --solex-conecta-produto-vao-compra: 10px;
    --solex-conecta-produto-vao-frete: 8px;
    --solex-conecta-produto-respiro-frete-campo: 0 14px;
    --solex-conecta-produto-respiro-frete-botao: 0 18px;
    --solex-conecta-produto-respiro-frete-resultado: 12px 14px;
    --solex-conecta-produto-vao-frete-resultado: 8px;
    --solex-conecta-produto-vao-frete-opcao: 4px 12px;
    --solex-conecta-produto-respiro-compartilhar: 14px 0 0;
    --solex-conecta-produto-vao-compartilhar: 8px 12px;
    /* As 7 redes numa linha só na coluna do resumo de 950px; no celular o
       botão volta ao alvo de toque mínimo, e a largura da tela ainda as cabe. */
    --solex-conecta-produto-compartilhar-link: 36px;
    --solex-conecta-produto-vao-compartilhar-lista: 8px;
    --solex-conecta-produto-sublinhado-recuo: 3px;

    --solex-conecta-produto-respiro-bloco: 24px 28px;
    --solex-conecta-produto-margem-paragrafo: 0 0 12px;
    --solex-conecta-produto-margem-titulo-descricao: 0 0 10px;
    --solex-conecta-produto-margem-subtitulo-descricao: 20px 0 8px;
    --solex-conecta-produto-margem-tabela: 16px 0;
    --solex-conecta-produto-respiro-celula: 10px 12px;
    --solex-conecta-produto-respiro-anuncio: 0;

    --solex-conecta-produto-colunas-avaliacoes: 280px minmax(0, 1fr);
    --solex-conecta-produto-vao-avaliacoes: 32px;
    --solex-conecta-produto-vao-avaliacoes-resumo: 10px;
    --solex-conecta-produto-vao-media: 6px;
    --solex-conecta-produto-colunas-barra: 64px minmax(0, 1fr) 32px;
    --solex-conecta-produto-vao-barra: 10px;
    --solex-conecta-produto-vao-barras: 8px;
    --solex-conecta-produto-margem-barras: 6px 0 8px;
    --solex-conecta-produto-barra-altura: 8px;
    --solex-conecta-produto-vao-corpo: 16px;
    --solex-conecta-produto-vao-fotos: 8px;
    --solex-conecta-produto-foto-cliente: 72px;
    --solex-conecta-produto-foto-avaliacao: 64px;
    --solex-conecta-produto-vao-ferramentas: 10px 12px;
    --solex-conecta-produto-respiro-filtro: 0 14px;
    /* O meio pixel a mais da borda da escolha sai do recuo, como na opção. */
    --solex-conecta-produto-respiro-filtro-ativo: 0 13.5px;
    --solex-conecta-produto-vao-filtro: 8px;
    --solex-conecta-produto-respiro-ordem: 0 40px 0 14px;
    --solex-conecta-produto-icone-distancia: 14px;
    --solex-conecta-produto-respiro-item: 18px 0;
    --solex-conecta-produto-vao-item: 8px;
    --solex-conecta-produto-vao-item-topo: 4px 12px;
    --solex-conecta-produto-vao-mais: 12px;
    --solex-conecta-produto-respiro-mais: 8px 0 0;
    --solex-conecta-produto-vao-perguntas-topo: 10px 16px;
    --solex-conecta-produto-vao-pergunta: 10px;
    --solex-conecta-produto-respiro-resposta: 12px 14px;
    --solex-conecta-produto-vao-resposta: 6px;
    --solex-conecta-produto-respiro-form: 18px;
    --solex-conecta-produto-vao-form: 14px;
    --solex-conecta-produto-vao-campo: 6px;
    --solex-conecta-produto-respiro-entrada: 0 14px;
    --solex-conecta-produto-respiro-texto-longo: 12px 14px;
    --solex-conecta-produto-texto-longo-altura: 112px;
    --solex-conecta-produto-vao-dupla: 14px;
    --solex-conecta-produto-vao-acoes: 10px;
    --solex-conecta-produto-vao-nota-escolha: 4px;
    --solex-conecta-produto-nota-escolha: 40px;

    --solex-conecta-produto-peso-forte: 700;
    --solex-conecta-produto-peso-medio: 600;
    --solex-conecta-produto-peso-leve: 500;
    --solex-conecta-produto-aperto: -0.02em;
    --solex-conecta-produto-aperto-leve: -0.01em;
    --solex-conecta-produto-base-tamanho: 15px;
    --solex-conecta-produto-base-linha: 1.45;
    --solex-conecta-produto-trilha-tamanho: 13px;
    --solex-conecta-produto-trilha-icone: 10px;
    --solex-conecta-produto-titulo-tamanho: 22px;
    --solex-conecta-produto-titulo-linha: 1.2;
    --solex-conecta-produto-titulo-icone-tamanho: 16px;
    --solex-conecta-produto-play-icone: 12px;
    --solex-conecta-produto-codigo-tamanho: 13px;
    --solex-conecta-produto-nota-tamanho: 14px;
    --solex-conecta-produto-estrela-tamanho: 14px;
    --solex-conecta-produto-nome-tamanho: 24px;
    --solex-conecta-produto-nome-linha: 1.25;
    --solex-conecta-produto-preco-tamanho: 30px;
    --solex-conecta-produto-preco-linha: 1.1;
    --solex-conecta-produto-forma-tamanho: 15px;
    --solex-conecta-produto-parcelas-tamanho: 15px;
    --solex-conecta-produto-link-tamanho: 14px;
    --solex-conecta-produto-link-icone: 11px;
    --solex-conecta-produto-forma-nome-tamanho: 15px;
    --solex-conecta-produto-grupo-tamanho: 13.5px;
    --solex-conecta-produto-condicao-tamanho: 13.5px;
    --solex-conecta-produto-rotulo-tamanho: 14px;
    --solex-conecta-produto-opcao-tamanho: 13.5px;
    --solex-conecta-produto-opcao-linha: 1.2;
    --solex-conecta-produto-campo-tamanho: 15px;
    --solex-conecta-produto-ajuda-tamanho: 13.5px;
    --solex-conecta-produto-frete-tamanho: 14px;
    --solex-conecta-produto-frete-valor-tamanho: 15px;
    --solex-conecta-produto-compartilhar-tamanho: 13.5px;
    --solex-conecta-produto-compartilhar-icone: 17px;
    --solex-conecta-produto-texto-tamanho: 15px;
    --solex-conecta-produto-texto-linha: 1.6;
    --solex-conecta-produto-descricao-h2-tamanho: 19px;
    --solex-conecta-produto-descricao-h2-linha: 1.3;
    --solex-conecta-produto-descricao-h3-tamanho: 16px;
    --solex-conecta-produto-tabela-tamanho: 14px;
    --solex-conecta-produto-tabela-linha: 1.45;
    --solex-conecta-produto-media-tamanho: 44px;
    --solex-conecta-produto-media-linha: 1;
    --solex-conecta-produto-media-de-tamanho: 15px;
    --solex-conecta-produto-estrela-grande-tamanho: 18px;
    --solex-conecta-produto-barra-tamanho: 13px;
    --solex-conecta-produto-subtitulo-tamanho: 14px;
    --solex-conecta-produto-filtro-tamanho: 14px;
    --solex-conecta-produto-filtro-total-tamanho: 13px;
    --solex-conecta-produto-ordem-icone: 12px;
    --solex-conecta-produto-verificado-tamanho: 12.5px;
    --solex-conecta-produto-item-tamanho: 15px;
    --solex-conecta-produto-item-linha: 1.55;
    --solex-conecta-produto-autor-tamanho: 13px;
    --solex-conecta-produto-mais-tamanho: 14px;
    --solex-conecta-produto-pergunta-tamanho: 15.5px;
    --solex-conecta-produto-pergunta-linha: 1.45;
    --solex-conecta-produto-resposta-tamanho: 14.5px;
    --solex-conecta-produto-form-titulo-tamanho: 17px;
    --solex-conecta-produto-form-titulo-linha: 1.25;
    --solex-conecta-produto-nota-escolha-icone: 24px;

    --solex-conecta-produto-transicao: 0.15s ease;
}

body.solex-conecta-produto-pagina {
    margin: 0;
    color: var(--solex-conecta-produto-texto);
    font-family: var(--solex-conecta-produto-fonte);
    background: var(--solex-conecta-produto-pagina);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.solex-conecta-produto {
    display: block;
    box-sizing: border-box;
    padding: var(--solex-conecta-produto-respiro-pagina);
    color: var(--solex-conecta-produto-texto);
    font-family: var(--solex-conecta-produto-fonte);
    font-size: var(--solex-conecta-produto-base-tamanho);
    line-height: var(--solex-conecta-produto-base-linha);
    background: var(--solex-conecta-produto-pagina);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.solex-conecta-produto *,
.solex-conecta-produto *::before,
.solex-conecta-produto *::after {
    box-sizing: border-box;
}

.solex-conecta-produto-container {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-pagina);
    width: 100%;
    max-width: var(--solex-conecta-produto-largura);
    margin: 0 auto;
    padding: 0 var(--solex-conecta-produto-margem-lateral);
}

/* O texto só para o leitor de tela. */
.solex-conecta-produto-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.solex-conecta-produto-trilha-item a:focus-visible,
.solex-conecta-produto-palco-botao:focus-visible,
.solex-conecta-produto-miniatura:focus-visible,
.solex-conecta-produto-nota:focus-visible,
.solex-conecta-produto-formas-abrir:focus-visible,
.solex-conecta-produto-opcao:has(.solex-conecta-produto-opcao-campo:focus-visible),
.solex-conecta-produto-frete-cep:focus-visible,
.solex-conecta-produto-compartilhar-link:focus-visible,
.solex-conecta-produto-foto-cliente:focus-visible,
.solex-conecta-produto-filtro:focus-visible,
.solex-conecta-produto-nota-escolha-opcao:has(input:focus-visible) {
    outline: var(--solex-conecta-produto-foco-largura) solid var(--solex-conecta-produto-foco);
    outline-offset: var(--solex-conecta-produto-foco-recuo);
}

/* ---------- Trilha ---------- */

.solex-conecta-produto-trilha-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-trilha);
    margin: 0;
    padding: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-trilha-tamanho);
    list-style: none;
}

.solex-conecta-produto-trilha-item {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-trilha);
}

.solex-conecta-produto-trilha-item > i {
    font-size: var(--solex-conecta-produto-trilha-icone);
}

.solex-conecta-produto-trilha-item a {
    color: var(--solex-conecta-produto-texto-suave);
    text-decoration: none;
}

.solex-conecta-produto-trilha-item a:hover {
    color: var(--solex-conecta-produto-texto);
    text-decoration: underline;
    text-underline-offset: var(--solex-conecta-produto-sublinhado-recuo);
}

/* ---------- Topo: fotos e resumo da compra ---------- */

.solex-conecta-produto-topo {
    display: grid;
    grid-template-columns: var(--solex-conecta-produto-colunas-topo);
    align-items: start;
    gap: var(--solex-conecta-produto-vao-topo);
    min-width: 0;
}

.solex-conecta-produto-galeria {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-miniaturas);
    min-width: 0;
}

/* A foto fica num quadrado do tamanho da coluna, com a imagem inteira dentro:
   as fotos do catálogo têm proporções diferentes, e o quadro não muda de altura
   ao trocar de foto. */
.solex-conecta-produto-palco {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-borda);
    border-radius: var(--solex-conecta-produto-raio);
    box-shadow: var(--solex-conecta-produto-sombra-bloco);
}

.solex-conecta-produto-palco-botao {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-palco);
    background: none;
    border: 0;
    border-radius: var(--solex-conecta-produto-raio);
    cursor: zoom-in;
}

.solex-conecta-produto-palco-botao img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.solex-conecta-produto-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-miniaturas);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-miniaturas li {
    display: flex;
    flex: 0 0 auto;
}

.solex-conecta-produto-miniatura {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-produto-miniatura);
    height: var(--solex-conecta-produto-miniatura);
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-miniatura);
    overflow: hidden;
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-miniatura);
    cursor: pointer;
    transition: border-color var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-miniatura:hover {
    border-color: var(--solex-conecta-produto-texto);
}

/* A foto à vista leva a borda mais grossa na cor do texto; a sombra de dentro
   completa a espessura sem mudar o tamanho da miniatura. */
.solex-conecta-produto-miniatura[aria-current="true"] {
    border-color: var(--solex-conecta-produto-texto);
    box-shadow: inset 0 0 0 var(--solex-conecta-produto-borda-largura) var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* O vídeo é a foto dele cortada para encher a miniatura, com o sinal de play no
   meio. */
.solex-conecta-produto-miniatura-video {
    padding: 0;
}

.solex-conecta-produto-miniatura-video img {
    object-fit: cover;
}

.solex-conecta-produto-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-produto-play);
    height: var(--solex-conecta-produto-play);
    color: var(--solex-conecta-produto-veu-texto);
    font-size: var(--solex-conecta-produto-play-icone);
    background: var(--solex-conecta-produto-veu);
    border-radius: var(--solex-conecta-produto-raio-circulo);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.solex-conecta-produto-resumo {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-resumo);
    min-width: 0;
    padding: var(--solex-conecta-produto-respiro-resumo);
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-borda);
    border-radius: var(--solex-conecta-produto-raio);
    box-shadow: var(--solex-conecta-produto-sombra-bloco);
}

.solex-conecta-produto-resumo-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--solex-conecta-produto-vao-resumo-topo);
}

.solex-conecta-produto-nota {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-nota);
    color: var(--solex-conecta-produto-texto);
    font-size: var(--solex-conecta-produto-nota-tamanho);
    text-decoration: none;
}

.solex-conecta-produto-nota strong {
    font-weight: var(--solex-conecta-produto-peso-forte);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-nota-total {
    color: var(--solex-conecta-produto-texto-suave);
    text-decoration: underline;
    text-underline-offset: var(--solex-conecta-produto-sublinhado-recuo);
}

.solex-conecta-produto-estrelas {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-estrelas);
    color: var(--solex-conecta-produto-estrela);
    font-size: var(--solex-conecta-produto-estrela-tamanho);
}

.solex-conecta-produto-codigo {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-codigo-tamanho);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-nome {
    margin: 0;
    font-size: var(--solex-conecta-produto-nome-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-nome-linha);
    letter-spacing: var(--solex-conecta-produto-aperto);
    overflow-wrap: anywhere;
}

/* ---------- Preço e formas de pagamento ---------- */

.solex-conecta-produto-preco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--solex-conecta-produto-vao-preco);
    min-width: 0;
}

.solex-conecta-produto-preco-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--solex-conecta-produto-vao-preco-linha);
    margin: 0;
}

.solex-conecta-produto-preco-valor {
    font-size: var(--solex-conecta-produto-preco-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-preco-linha);
    letter-spacing: var(--solex-conecta-produto-aperto);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-preco-forma {
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-forma-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-preco-parcelas {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-parcelas-tamanho);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-formas-abrir,
.solex-conecta-produto-frete-cep {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-formas-abrir);
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-formas-abrir);
    color: var(--solex-conecta-produto-texto);
    font-family: inherit;
    font-size: var(--solex-conecta-produto-link-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
    text-decoration: underline;
    text-underline-offset: var(--solex-conecta-produto-sublinhado-recuo);
    background: none;
    border: 0;
    cursor: pointer;
}

.solex-conecta-produto-formas-abrir > i {
    font-size: var(--solex-conecta-produto-link-icone);
    transition: transform var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-formas-abrir[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.solex-conecta-produto-formas {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-formas);
    width: 100%;
    margin: var(--solex-conecta-produto-margem-formas);
    padding: var(--solex-conecta-produto-respiro-formas);
    border-top: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
}

/* O display do painel venceria o hidden, e as formas ficariam abertas. */
.solex-conecta-produto-formas[hidden] {
    display: none;
}

.solex-conecta-produto-forma {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-forma);
}

.solex-conecta-produto-forma-nome {
    margin: 0;
    font-size: var(--solex-conecta-produto-forma-nome-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
}

.solex-conecta-produto-forma-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-grupo);
}

.solex-conecta-produto-forma-grupo-titulo {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-grupo-tamanho);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-forma-grupo-titulo strong {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-forma-condicoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-condicoes);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-forma-condicao {
    padding: var(--solex-conecta-produto-respiro-condicao);
    font-size: var(--solex-conecta-produto-condicao-tamanho);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--solex-conecta-produto-pagina);
    border-radius: var(--solex-conecta-produto-raio-etiqueta);
}

/* ---------- Opções (a variação) ---------- */

.solex-conecta-produto-opcoes {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-opcoes);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.solex-conecta-produto-opcoes-legenda {
    padding: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-rotulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-opcoes-legenda strong {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-forte);
}

.solex-conecta-produto-opcoes-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-opcoes-lista);
}

.solex-conecta-produto-opcao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-opcao);
    width: var(--solex-conecta-produto-opcao-largura);
    padding: var(--solex-conecta-produto-respiro-opcao);
    color: var(--solex-conecta-produto-texto);
    text-align: center;
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-controle);
    cursor: pointer;
    transition: border-color var(--solex-conecta-produto-transicao), background-color var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-opcao:hover {
    border-color: var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-opcao:has(.solex-conecta-produto-opcao-campo:checked) {
    padding: var(--solex-conecta-produto-respiro-opcao-ativa);
    background: var(--solex-conecta-produto-ativa);
    border: var(--solex-conecta-produto-borda-largura-forte) solid var(--solex-conecta-produto-texto);
}

/* O rádio fica no documento, para o teclado e o leitor de tela; quem vê
   escolhe pela foto e pelo nome. */
.solex-conecta-produto-opcao-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.solex-conecta-produto-opcao-foto {
    display: block;
    width: var(--solex-conecta-produto-opcao-foto);
    height: var(--solex-conecta-produto-opcao-foto);
    object-fit: contain;
    background: var(--solex-conecta-produto-superficie);
    border-radius: var(--solex-conecta-produto-raio-miniatura);
}

.solex-conecta-produto-opcao-nome {
    font-size: var(--solex-conecta-produto-opcao-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
    line-height: var(--solex-conecta-produto-opcao-linha);
    overflow-wrap: anywhere;
}

/* ---------- Compra ---------- */

/* A ação principal em cima e o carrinho embaixo, os dois na largura do resumo:
   lado a lado, o "Adicionar ao carrinho" não cabe no celular. */
.solex-conecta-produto-compra {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-compra);
    min-width: 0;
}

/* ---------- Frete ---------- */

.solex-conecta-produto-frete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--solex-conecta-produto-vao-frete);
    min-width: 0;
}

.solex-conecta-produto-frete-rotulo {
    font-size: var(--solex-conecta-produto-rotulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-frete-linha {
    display: flex;
    gap: var(--solex-conecta-produto-vao-compra);
    width: 100%;
    min-width: 0;
}

.solex-conecta-produto-frete-campo,
.solex-conecta-produto-ordem-campo,
.solex-conecta-produto-form-entrada {
    min-width: 0;
    min-height: var(--solex-conecta-produto-controle);
    margin: 0;
    color: var(--solex-conecta-produto-texto);
    font-family: inherit;
    font-size: var(--solex-conecta-produto-campo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-leve);
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura-forte) solid var(--solex-conecta-produto-borda-forte);
    border-radius: var(--solex-conecta-produto-raio-controle);
    transition: border-color var(--solex-conecta-produto-transicao), box-shadow var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-frete-campo {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--solex-conecta-produto-respiro-frete-campo);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-frete-campo:focus,
.solex-conecta-produto-ordem-campo:focus,
.solex-conecta-produto-form-entrada:focus {
    border-color: var(--solex-conecta-produto-foco);
    box-shadow: var(--solex-conecta-produto-sombra-foco);
    outline: none;
}

/* O botão do frete fica na altura do campo, e não na dos botões de compra. */
.solex-conecta-produto-frete-botao {
    flex: 0 0 auto;
    min-height: var(--solex-conecta-produto-controle);
    padding: var(--solex-conecta-produto-respiro-frete-botao);
}

.solex-conecta-produto-frete-resultado {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-frete-resultado);
    width: 100%;
    padding: var(--solex-conecta-produto-respiro-frete-resultado);
    font-size: var(--solex-conecta-produto-frete-tamanho);
    background: var(--solex-conecta-produto-pagina);
    border-radius: var(--solex-conecta-produto-raio-controle);
}

/* Vazio antes da primeira consulta: sem o display, a caixa do resultado
   apareceria sem nada dentro. */
.solex-conecta-produto-frete-resultado:empty {
    display: none;
}

.solex-conecta-produto-frete-local {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-formas-abrir);
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
}

.solex-conecta-produto-frete-opcao {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--solex-conecta-produto-vao-frete-opcao);
    margin: 0;
}

.solex-conecta-produto-frete-valor {
    font-size: var(--solex-conecta-produto-frete-valor-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Compartilhar ---------- */

.solex-conecta-produto-compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-compartilhar);
    padding: var(--solex-conecta-produto-respiro-compartilhar);
    border-top: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
}

.solex-conecta-produto-compartilhar-rotulo {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-compartilhar-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-compartilhar-lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-compartilhar-lista);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-compartilhar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-produto-compartilhar-link);
    height: var(--solex-conecta-produto-compartilhar-link);
    color: var(--solex-conecta-produto-texto);
    font-size: var(--solex-conecta-produto-compartilhar-icone);
    text-decoration: none;
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-circulo);
    transition: border-color var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-compartilhar-link:hover {
    border-color: var(--solex-conecta-produto-texto);
}

/* ---------- Seções ---------- */

.solex-conecta-produto-secao {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-secao);
    min-width: 0;
    margin-top: calc(var(--solex-conecta-produto-vao-secoes) - var(--solex-conecta-produto-vao-pagina));
}

.solex-conecta-produto-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--solex-conecta-produto-vao-cabeca);
    min-width: 0;
}

.solex-conecta-produto-titulo {
    display: flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-titulo);
    min-width: 0;
    margin: 0;
    font-size: var(--solex-conecta-produto-titulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-titulo-linha);
    letter-spacing: var(--solex-conecta-produto-aperto);
}

/* O ícone de cada título fica num círculo na cor de destaque da marca, com o
   texto do destaque, como os títulos da página inicial. */
.solex-conecta-produto-titulo-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-produto-titulo-icone);
    height: var(--solex-conecta-produto-titulo-icone);
    color: var(--solex-conecta-produto-texto-destaque);
    font-size: var(--solex-conecta-produto-titulo-icone-tamanho);
    background: var(--solex-conecta-produto-destaque);
    border-radius: var(--solex-conecta-produto-raio-circulo);
}

.solex-conecta-produto-bloco {
    min-width: 0;
    padding: var(--solex-conecta-produto-respiro-bloco);
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-borda);
    border-radius: var(--solex-conecta-produto-raio);
    box-shadow: var(--solex-conecta-produto-sombra-bloco);
}

.solex-conecta-produto-mais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-mais);
    padding: var(--solex-conecta-produto-respiro-mais);
}

.solex-conecta-produto-mais-texto {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-mais-tamanho);
}

.solex-conecta-produto-mais-texto strong {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-forte);
    font-variant-numeric: tabular-nums;
}

/* ---------- Descrição ---------- */

.solex-conecta-produto-descricao {
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-texto-tamanho);
    line-height: var(--solex-conecta-produto-texto-linha);
    overflow-wrap: anywhere;
}

.solex-conecta-produto-descricao > :first-child {
    margin-top: 0;
}

.solex-conecta-produto-descricao > :last-child {
    margin-bottom: 0;
}

.solex-conecta-produto-descricao h2 {
    margin: var(--solex-conecta-produto-margem-titulo-descricao);
    color: var(--solex-conecta-produto-texto);
    font-size: var(--solex-conecta-produto-descricao-h2-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-descricao-h2-linha);
    letter-spacing: var(--solex-conecta-produto-aperto-leve);
}

.solex-conecta-produto-descricao h3 {
    margin: var(--solex-conecta-produto-margem-subtitulo-descricao);
    color: var(--solex-conecta-produto-texto);
    font-size: var(--solex-conecta-produto-descricao-h3-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
}

.solex-conecta-produto-descricao p {
    margin: var(--solex-conecta-produto-margem-paragrafo);
}

.solex-conecta-produto-descricao strong {
    color: var(--solex-conecta-produto-texto);
}

/* A tabela da descrição vem do cadastro, com as cores escritas no HTML (o
   bgcolor das linhas alternadas): as linhas pintadas passam ao tom da página
   e as outras à superfície, para a tabela seguir a marca. */
.solex-conecta-produto-descricao table {
    width: 100%;
    margin: var(--solex-conecta-produto-margem-tabela);
    font-size: var(--solex-conecta-produto-tabela-tamanho);
    line-height: var(--solex-conecta-produto-tabela-linha);
    border-collapse: collapse;
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
}

.solex-conecta-produto-descricao tr {
    background: var(--solex-conecta-produto-superficie);
}

.solex-conecta-produto-descricao tr[bgcolor] {
    background: var(--solex-conecta-produto-pagina);
}

.solex-conecta-produto-descricao th,
.solex-conecta-produto-descricao td {
    padding: var(--solex-conecta-produto-respiro-celula);
    text-align: left;
    vertical-align: top;
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
}

.solex-conecta-produto-descricao th {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-forte);
}

.solex-conecta-produto-descricao img {
    max-width: 100%;
    height: auto;
}

.solex-conecta-produto-anuncio {
    padding: var(--solex-conecta-produto-respiro-anuncio);
}

/* ---------- Avaliações ---------- */

.solex-conecta-produto-avaliacoes {
    display: grid;
    grid-template-columns: var(--solex-conecta-produto-colunas-avaliacoes);
    align-items: start;
    gap: var(--solex-conecta-produto-vao-avaliacoes);
}

.solex-conecta-produto-avaliacoes-resumo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--solex-conecta-produto-vao-avaliacoes-resumo);
    min-width: 0;
}

.solex-conecta-produto-media {
    display: flex;
    align-items: baseline;
    gap: var(--solex-conecta-produto-vao-media);
    margin: 0;
}

.solex-conecta-produto-media-numero {
    font-size: var(--solex-conecta-produto-media-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-media-linha);
    letter-spacing: var(--solex-conecta-produto-aperto);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-media-de,
.solex-conecta-produto-media-total {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-media-de-tamanho);
}

.solex-conecta-produto-estrelas.is-grande {
    font-size: var(--solex-conecta-produto-estrela-grande-tamanho);
}

.solex-conecta-produto-barras {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-barras);
    width: 100%;
    margin: var(--solex-conecta-produto-margem-barras);
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-barra {
    display: grid;
    grid-template-columns: var(--solex-conecta-produto-colunas-barra);
    align-items: center;
    gap: var(--solex-conecta-produto-vao-barra);
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-barra-tamanho);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-barra-trilho {
    display: block;
    height: var(--solex-conecta-produto-barra-altura);
    overflow: hidden;
    background: var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-circulo);
}

/* A largura de cada barra é a fatia da nota no total, calculada no servidor;
   o resto é o trilho. */
.solex-conecta-produto-barra-cheia {
    display: block;
    width: var(--solex-conecta-produto-barra-fatia, 0%);
    height: 100%;
    background: var(--solex-conecta-produto-estrela);
    border-radius: var(--solex-conecta-produto-raio-circulo);
}

.solex-conecta-produto-barra-total {
    text-align: right;
}

.solex-conecta-produto-avaliar {
    width: 100%;
}

.solex-conecta-produto-avaliacoes-corpo {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-corpo);
    min-width: 0;
}

.solex-conecta-produto-fotos-clientes {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-fotos);
    min-width: 0;
}

.solex-conecta-produto-subtitulo {
    margin: 0;
    font-size: var(--solex-conecta-produto-subtitulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-fotos-clientes-lista,
.solex-conecta-produto-avaliacao-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-fotos);
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-fotos-clientes-lista > li,
.solex-conecta-produto-avaliacao-fotos > li {
    display: flex;
    flex: 0 0 auto;
}

.solex-conecta-produto-foto-cliente {
    display: block;
    width: var(--solex-conecta-produto-foto-cliente);
    height: var(--solex-conecta-produto-foto-cliente);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--solex-conecta-produto-pagina);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-miniatura);
    cursor: zoom-in;
    transition: border-color var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-foto-cliente:hover {
    border-color: var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-avaliacao-fotos .solex-conecta-produto-foto-cliente {
    width: var(--solex-conecta-produto-foto-avaliacao);
    height: var(--solex-conecta-produto-foto-avaliacao);
}

.solex-conecta-produto-foto-cliente img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solex-conecta-produto-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--solex-conecta-produto-vao-ferramentas);
}

/* O filtro é a etiqueta dos tipos da categoria: ligado, o tom ativo da ação e
   o contorno mais grosso na cor do texto. */
.solex-conecta-produto-filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-filtro);
    min-height: var(--solex-conecta-produto-chip);
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-filtro);
    color: var(--solex-conecta-produto-texto);
    font-family: inherit;
    font-size: var(--solex-conecta-produto-filtro-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
    background: var(--solex-conecta-produto-superficie);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
    border-radius: var(--solex-conecta-produto-raio-controle);
    cursor: pointer;
    transition: border-color var(--solex-conecta-produto-transicao), background-color var(--solex-conecta-produto-transicao);
}

.solex-conecta-produto-filtro:hover {
    border-color: var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-filtro[aria-pressed="true"] {
    padding: var(--solex-conecta-produto-respiro-filtro-ativo);
    background: var(--solex-conecta-produto-ativa);
    border: var(--solex-conecta-produto-borda-largura-forte) solid var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-filtro > i {
    color: var(--solex-conecta-produto-texto-suave);
}

.solex-conecta-produto-filtro-total {
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-filtro-total-tamanho);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-ordem-caixa {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.solex-conecta-produto-ordem-campo {
    padding: var(--solex-conecta-produto-respiro-ordem);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.solex-conecta-produto-ordem-caixa > i {
    position: absolute;
    top: 50%;
    right: var(--solex-conecta-produto-icone-distancia);
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-ordem-icone);
    transform: translateY(-50%);
    pointer-events: none;
}

.solex-conecta-produto-avaliacoes-lista,
.solex-conecta-produto-perguntas-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.solex-conecta-produto-avaliacao,
.solex-conecta-produto-pergunta {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-item);
    padding: var(--solex-conecta-produto-respiro-item);
    border-top: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-linha);
}

.solex-conecta-produto-avaliacao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-item-topo);
}

.solex-conecta-produto-verificado {
    display: inline-flex;
    align-items: center;
    gap: var(--solex-conecta-produto-vao-estrelas);
    color: var(--solex-conecta-produto-ok);
    font-size: var(--solex-conecta-produto-verificado-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-avaliacao-texto,
.solex-conecta-produto-resposta-texto {
    margin: 0;
    font-size: var(--solex-conecta-produto-item-tamanho);
    line-height: var(--solex-conecta-produto-item-linha);
    overflow-wrap: anywhere;
}

.solex-conecta-produto-avaliacao-autor,
.solex-conecta-produto-pergunta-autor,
.solex-conecta-produto-resposta-autor {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-autor-tamanho);
}

.solex-conecta-produto-avaliacao-autor strong,
.solex-conecta-produto-pergunta-autor strong,
.solex-conecta-produto-resposta-autor strong {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

/* ---------- Perguntas ---------- */

.solex-conecta-produto-perguntas {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-corpo);
}

.solex-conecta-produto-perguntas-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--solex-conecta-produto-vao-perguntas-topo);
}

.solex-conecta-produto-perguntas-total {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-mais-tamanho);
}

.solex-conecta-produto-perguntas-total strong {
    color: var(--solex-conecta-produto-texto);
    font-weight: var(--solex-conecta-produto-peso-forte);
    font-variant-numeric: tabular-nums;
}

.solex-conecta-produto-pergunta {
    gap: var(--solex-conecta-produto-vao-pergunta);
}

.solex-conecta-produto-pergunta-texto {
    margin: 0;
    font-size: var(--solex-conecta-produto-pergunta-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
    line-height: var(--solex-conecta-produto-pergunta-linha);
    overflow-wrap: anywhere;
}

.solex-conecta-produto-resposta {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-resposta);
    padding: var(--solex-conecta-produto-respiro-resposta);
    background: var(--solex-conecta-produto-pagina);
    border-radius: var(--solex-conecta-produto-raio-controle);
}

.solex-conecta-produto-resposta-texto {
    font-size: var(--solex-conecta-produto-resposta-tamanho);
}

/* ---------- Formulários de avaliação e de pergunta ---------- */

.solex-conecta-produto-form {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-form);
    min-width: 0;
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-form);
    background: var(--solex-conecta-produto-pagina);
    border-radius: var(--solex-conecta-produto-raio);
}

/* O display do formulário venceria o hidden, e ele ficaria aberto. */
.solex-conecta-produto-form[hidden] {
    display: none;
}

.solex-conecta-produto-form-titulo {
    margin: 0;
    font-size: var(--solex-conecta-produto-form-titulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-forte);
    line-height: var(--solex-conecta-produto-form-titulo-linha);
}

.solex-conecta-produto-form-campo {
    display: flex;
    flex-direction: column;
    gap: var(--solex-conecta-produto-vao-campo);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* O campo do e-mail sai da avaliação pelo convite, que já traz a compra. */
.solex-conecta-produto-form-campo[hidden] {
    display: none;
}

.solex-conecta-produto-form-rotulo {
    padding: 0;
    font-size: var(--solex-conecta-produto-rotulo-tamanho);
    font-weight: var(--solex-conecta-produto-peso-medio);
}

.solex-conecta-produto-form-entrada {
    width: 100%;
    padding: var(--solex-conecta-produto-respiro-entrada);
}

textarea.solex-conecta-produto-form-entrada {
    min-height: var(--solex-conecta-produto-texto-longo-altura);
    padding: var(--solex-conecta-produto-respiro-texto-longo);
    line-height: var(--solex-conecta-produto-base-linha);
    resize: vertical;
}

.solex-conecta-produto-form-dupla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--solex-conecta-produto-vao-dupla);
}

.solex-conecta-produto-form-ajuda {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
    font-size: var(--solex-conecta-produto-ajuda-tamanho);
}

/* O botão de escolher os arquivos é o rótulo do campo do navegador, que fica
   dentro dele, no documento, para o teclado e o leitor de tela. */
.solex-conecta-produto-form-arquivo {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
}

.solex-conecta-produto-form-arquivo:has(.solex-conecta-produto-form-arquivo-campo:focus-visible) {
    outline: var(--solex-conecta-produto-foco-largura) solid var(--solex-conecta-produto-foco);
    outline-offset: var(--solex-conecta-produto-foco-recuo);
}

.solex-conecta-produto-form-arquivo-campo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.solex-conecta-produto-form-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--solex-conecta-produto-vao-acoes);
}

/* A nota é escolhida pelas estrelas: cada uma é um rádio, que fica no
   documento para o teclado e o leitor de tela. */
.solex-conecta-produto-nota-escolha-lista {
    display: flex;
    gap: var(--solex-conecta-produto-vao-nota-escolha);
}

.solex-conecta-produto-nota-escolha-opcao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--solex-conecta-produto-nota-escolha);
    height: var(--solex-conecta-produto-nota-escolha);
    color: var(--solex-conecta-produto-borda-forte);
    font-size: var(--solex-conecta-produto-nota-escolha-icone);
    border-radius: var(--solex-conecta-produto-raio-controle);
    cursor: pointer;
}

.solex-conecta-produto-nota-escolha-opcao.is-cheia {
    color: var(--solex-conecta-produto-estrela);
}

.solex-conecta-produto-nota-escolha-opcao input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* O envio recebido fica no lugar do formulário, até a pessoa abrir outro. */
.solex-conecta-produto-form-recebido {
    margin: 0;
    font-size: var(--solex-conecta-produto-texto-tamanho);
    color: var(--solex-conecta-produto-texto);
}

.solex-conecta-produto-form-recebido[hidden] {
    display: none;
}

/* O produto ainda sem avaliação ou sem pergunta mostra o texto no lugar da
   lista, com o botão do formulário. */
.solex-conecta-produto-vazio {
    margin: 0;
    font-size: var(--solex-conecta-produto-texto-tamanho);
    color: var(--solex-conecta-produto-texto-suave);
}

/* ---------- O vídeo, a falta de foto e o produto indisponível ---------- */

/* O vídeo toma o lugar da foto no palco, no mesmo quadrado: trocar entre os
   dois não muda a altura da galeria. */
.solex-conecta-produto-palco-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* O produto sem foto mostra o ícone no meio do quadrado, como o cartão da
   vitrine. */
.solex-conecta-produto-palco > .fa-image {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: var(--solex-conecta-produto-titulo-icone);
    color: var(--solex-conecta-produto-borda-forte);
    transform: translate(-50%, -50%);
}

/* O aviso fica no lugar do preço, das opções e da compra, com a cor de
   informação da página, sem a de erro: o produto existe e os parecidos estão
   logo abaixo. */
.solex-conecta-produto-indisponivel {
    display: flex;
    align-items: flex-start;
    gap: var(--solex-conecta-produto-vao-formas-abrir);
    padding: var(--solex-conecta-produto-respiro-frete-resultado);
    font-size: var(--solex-conecta-produto-texto-tamanho);
    color: var(--solex-conecta-produto-texto);
    background: var(--solex-conecta-produto-pagina);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-borda);
    border-radius: var(--solex-conecta-produto-raio-controle);
}

.solex-conecta-produto-indisponivel-titulo {
    margin: 0;
    font-weight: var(--solex-conecta-produto-peso-forte);
}

.solex-conecta-produto-indisponivel-texto {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
}

/* A falha que a página mostra no lugar dela (a lista que não respondeu, a
   página que não carregou por completo), com a borda inteira mais forte. */
.solex-conecta-produto-erro {
    margin: 0;
    padding: var(--solex-conecta-produto-respiro-frete-resultado);
    font-size: var(--solex-conecta-produto-texto-tamanho);
    color: var(--solex-conecta-produto-texto);
    background: var(--solex-conecta-produto-pagina);
    border: var(--solex-conecta-produto-borda-largura) solid var(--solex-conecta-produto-borda-forte);
    border-radius: var(--solex-conecta-produto-raio-controle);
}

.solex-conecta-produto-erro[hidden] {
    display: none;
}

/* O CEP que a loja não atende, ou a consulta que falhou, no lugar do
   resultado do frete. */
.solex-conecta-produto-frete-aviso {
    margin: 0;
    color: var(--solex-conecta-produto-texto-suave);
}

/* O display do bloco venceria o hidden: o preço das outras opções e o "Ver
   mais" da lista que já chegou ao total ficariam à mostra. */
.solex-conecta-produto-preco[hidden],
.solex-conecta-produto-mais[hidden] {
    display: none;
}

/* O lote pedido a caminho, logo depois da lista em que ele vai entrar. */
.solex-conecta-produto-carregando {
    margin: 0;
    font-size: var(--solex-conecta-produto-texto-tamanho);
    color: var(--solex-conecta-produto-texto-suave);
}

.solex-conecta-produto-carregando[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .solex-conecta-produto-miniatura,
.solex-conecta-produto-formas-abrir > i,
.solex-conecta-produto-opcao,
.solex-conecta-produto-frete-campo,
.solex-conecta-produto-ordem-campo,
.solex-conecta-produto-form-entrada,
.solex-conecta-produto-compartilhar-link,
.solex-conecta-produto-foto-cliente,
.solex-conecta-produto-filtro {
        transition: none;
    }
}

@media (max-width: 949px) {
    :root {
        --solex-conecta-produto-margem-lateral: 12px;
        --solex-conecta-produto-respiro-pagina: 12px 0 32px;
        --solex-conecta-produto-vao-pagina: 12px;
        --solex-conecta-produto-vao-secoes: 28px;
        --solex-conecta-produto-vao-secao: 12px;
        --solex-conecta-produto-vao-titulo: 10px;
        --solex-conecta-produto-vao-topo: 12px;
        --solex-conecta-produto-raio: 14px;
        --solex-conecta-produto-titulo-tamanho: 19px;
        --solex-conecta-produto-titulo-icone: 32px;
        --solex-conecta-produto-titulo-icone-tamanho: 14px;
        --solex-conecta-produto-respiro-palco: 10px;
        --solex-conecta-produto-miniatura: 60px;
        --solex-conecta-produto-vao-miniaturas: 8px;
        --solex-conecta-produto-respiro-resumo: 16px;
        --solex-conecta-produto-vao-resumo: 16px;
        --solex-conecta-produto-nome-tamanho: 20px;
        --solex-conecta-produto-preco-tamanho: 27px;
        --solex-conecta-produto-opcao-largura: 76px;
        --solex-conecta-produto-opcao-foto: 56px;
        /* 16px no celular: abaixo disso o iOS aproxima a tela ao tocar no campo. */
        --solex-conecta-produto-campo-tamanho: 16px;
        --solex-conecta-produto-respiro-bloco: 18px 16px;
        --solex-conecta-produto-vao-avaliacoes: 20px;
        --solex-conecta-produto-media-tamanho: 38px;
        --solex-conecta-produto-foto-cliente: 64px;
        --solex-conecta-produto-foto-avaliacao: 56px;
        --solex-conecta-produto-respiro-item: 16px 0;
        --solex-conecta-produto-compartilhar-link: var(--solex-conecta-produto-alvo-toque);
        --solex-conecta-produto-respiro-form: 14px;
    }

    /* O link de texto (a trilha, as formas de pagamento e o Não sei meu CEP)
       ganha o alvo de toque mínimo, que a linha do texto não tem. */
    .solex-conecta-produto-trilha-item a,
.solex-conecta-produto-formas-abrir,
.solex-conecta-produto-frete-cep {
        min-height: var(--solex-conecta-produto-alvo-toque);
    }

    .solex-conecta-produto-trilha-item a {
        display: inline-flex;
        align-items: center;
    }

    .solex-conecta-produto-topo,
.solex-conecta-produto-avaliacoes,
.solex-conecta-produto-form-dupla {
        grid-template-columns: minmax(0, 1fr);
    }

    /* As miniaturas e as fotos de clientes ficam numa linha que rola de lado
       dentro da própria lista, e a página não ganha rolagem horizontal; as
       miniaturas vão até a borda da tela, e as fotos, até a do bloco delas. */
    .solex-conecta-produto-miniaturas {
        flex-wrap: nowrap;
        margin: 0 calc(-1 * var(--solex-conecta-produto-margem-lateral));
        padding: 0 var(--solex-conecta-produto-margem-lateral);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .solex-conecta-produto-fotos-clientes-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .solex-conecta-produto-miniaturas::-webkit-scrollbar,
.solex-conecta-produto-fotos-clientes-lista::-webkit-scrollbar {
        display: none;
    }

    .solex-conecta-produto-perguntas-topo {
        flex-direction: column;
        align-items: stretch;
    }

    /* O filtro e a ordem dividem a linha: o filtro no tamanho dele e a ordem
       com o resto. */
    .solex-conecta-produto-ferramentas {
        flex-wrap: nowrap;
    }

    .solex-conecta-produto-ordem-caixa {
        flex: 1 1 auto;
    }

    .solex-conecta-produto-ordem-campo {
        width: 100%;
    }

    .solex-conecta-produto-mais .solex-conecta-vitrine-botao,
.solex-conecta-produto-perguntas-topo .solex-conecta-vitrine-botao,
.solex-conecta-produto-form-acoes .solex-conecta-vitrine-botao {
        width: 100%;
    }
}