/* PAGINA DE PRODUTO */

.produto { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: start; padding-bottom: 60px; }

/* ---------- galeria ---------- */
.galeria { display: grid; grid-template-columns: 78px 1fr; gap: 14px; position: sticky; top: 130px; }
.minis { display: grid; gap: 10px; align-content: start; max-height: 640px; overflow-y: auto; }
.minis::-webkit-scrollbar { width: 3px; }
.minis::-webkit-scrollbar-thumb { background: var(--borda); }
.mini { padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: var(--fundo-alt); aspect-ratio: var(--foto); transition: border-color var(--transicao), opacity var(--transicao); opacity: .72; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini:hover { opacity: 1; }
.mini.ativa { border-color: var(--texto); opacity: 1; }

.fotos { position: relative; background: var(--fundo-alt); border-radius: var(--raio); overflow: hidden; aspect-ratio: var(--foto); }
.foto { display: none; position: absolute; inset: 0; }
.foto.ativa { display: block; animation: fade 320ms ease; }
.foto img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 500ms cubic-bezier(.22,.61,.36,1); }
.fotos.zoom .foto img { transform: scale(1.9); cursor: zoom-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.foto-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(252,250,245,.85); color: var(--texto); font-size: 22px; display: grid; place-items: center; opacity: 0; transition: opacity var(--transicao); z-index: 2; }
.fotos:hover .foto-seta { opacity: 1; }
.foto-seta.ant { left: 12px; }
.foto-seta.prox { right: 12px; }

/* ---------- coluna de compra ---------- */
.marca-produto { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 8px; }
.nome-produto { font-family: var(--titulo); font-size: 27px; line-height: 1.3; margin: 0 0 6px; }
.ref { font-size: 11px; color: var(--texto-fraco); margin: 0 0 20px; }

.precos { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.preco-grande { font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.parcela { font-size: 13px; color: var(--texto-suave); margin: 6px 0 26px; }

.opcao { margin-bottom: 22px; }
.opcao-rotulo { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 11px; }
.opcao-rotulo b { color: var(--texto); text-transform: none; letter-spacing: normal; font-size: 13px; }
.medidas { margin-left: auto; text-transform: none; letter-spacing: normal; font-size: 11.5px; text-decoration: underline; }

.cores { display: flex; gap: 9px; flex-wrap: wrap; }
.cor { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--borda); transition: transform var(--transicao), box-shadow var(--transicao); }
.cor img { width: 100%; height: 100%; object-fit: cover; }
.cor:hover { transform: scale(1.07); }
.cor.atual { box-shadow: 0 0 0 2px var(--texto); border-color: transparent; }
.cor.esgotada { opacity: .4; }

.tamanhos { display: flex; gap: 8px; flex-wrap: wrap; }
.tam { min-width: 48px; height: 44px; padding: 0 12px; border: 1px solid var(--borda); background: #fff; border-radius: 5px; font-size: 13px; color: var(--texto); transition: all var(--transicao); }
.tam:hover:not(.off) { border-color: var(--texto); }
.tam.escolhido { background: var(--texto); color: #fff; border-color: var(--texto); }
.tam.off { color: var(--texto-fraco); background: var(--fundo-alt); cursor: not-allowed; position: relative; overflow: hidden; }
.tam.off::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top left, transparent 47%, var(--borda) 47%, var(--borda) 53%, transparent 53%); }
.erro-tam { color: var(--promo); font-size: 12px; margin: 9px 0 0; }

.comprar { margin-bottom: 18px; height: 54px; font-size: 14px; }
/* o botao continua preto depois de escolher o tamanho, como no site de origem */
.comprar.pronto { background: var(--preto); border-color: var(--preto); }

.beneficios { display: grid; gap: 9px; padding: 18px 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-suave); }
.beneficios b { color: var(--texto); }

.cep { padding: 20px 0; border-bottom: 1px solid var(--borda); }
.cep label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 10px; }
.cep-linha { display: flex; gap: 9px; }
.cep-linha input { flex: 1; height: 44px; border: 1px solid var(--borda); border-radius: 5px; padding: 0 13px; font: inherit; font-size: 13px; }
.cep-linha .btn { height: 44px; padding: 0 20px; font-size: 11px; }
#cep-resultado { margin-top: 12px; font-size: 12.5px; display: grid; gap: 7px; }
#cep-resultado .op { display: flex; justify-content: space-between; padding: 9px 12px; background: var(--fundo-alt); border-radius: 5px; }
#cep-resultado .op b { font-weight: 600; }

.bloco { padding: 24px 0; border-bottom: 1px solid var(--borda); }
.bloco h2 { font-family: var(--corpo); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.descricao { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13px; color: var(--texto-suave); line-height: 1.6; }
.ficha { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ficha th { text-align: left; font-weight: 500; color: var(--texto-fraco); padding: 7px 0; width: 42%; vertical-align: top; }
.ficha td { padding: 7px 0; color: var(--texto-suave); }

/* ---------- toast ---------- */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; background: var(--texto); color: #fff; padding: 14px 20px; border-radius: var(--raio); font-size: 13px; box-shadow: 0 10px 34px rgba(0,0,0,.24); display: flex; align-items: center; gap: 14px; animation: sobe 320ms cubic-bezier(.22,.61,.36,1); }
.toast a { text-decoration: underline; font-weight: 600; }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .produto { grid-template-columns: 1fr 380px; gap: 32px; }
}
@media (max-width: 860px) {
  .produto { grid-template-columns: 1fr; gap: 26px; }
  .galeria { position: static; grid-template-columns: 1fr; }
  .minis { grid-auto-flow: column; grid-auto-columns: 62px; overflow-x: auto; max-height: none; order: 2; }
  .fotos { order: 1; }
  .nome-produto { font-size: 22px; }
  .comprar { position: sticky; bottom: 12px; z-index: 30; box-shadow: 0 6px 22px rgba(0,0,0,.16); }
}

/* ---------- avaliações (mesmo formato do site de origem) ---------- */
/* .estrelas / .av-selo / .av-mini agora ficam em loja.css (valem em todas as páginas) */

.avaliacoes { padding: 56px 0 20px; border-top: 1px solid var(--borda); margin-top: 40px; }
.avaliacoes h2 { font-family: var(--titulo); font-size: 26px; font-weight: 400; text-align: center; margin: 0 0 6px; }
.av-sub { text-align: center; font-size: 14px; color: var(--texto); margin: 0 0 4px; font-weight: 500; }
.av-qtd { text-align: center; font-size: 12.5px; color: var(--texto-suave); margin: 0 0 30px; }
.av-vazio { text-align: center; font-size: 13px; color: var(--texto-suave); padding: 20px 0 40px; }

.av-grade { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 46px; align-items: start; }
.av-resumo { text-align: left; }
.av-nota { margin: 0 0 6px; font-size: 15px; color: var(--texto-suave); }
.av-nota b { font-size: 40px; font-weight: 400; color: var(--texto); font-family: var(--titulo); }
.av-total { font-size: 12px; color: var(--texto-fraco); margin-left: 6px; }
.av-barras { margin: 18px 0 22px; display: grid; gap: 5px; }
.av-barra { display: grid; grid-template-columns: 12px 1fr 26px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--texto-suave); }
.av-barra i { display: block; height: 6px; border-radius: 3px; background: var(--fundo-alt); overflow: hidden; }
.av-barra b { display: block; height: 100%; background: #F5A623; }
.av-barra em { font-style: normal; text-align: right; color: var(--texto-fraco); }
.av-recomendam { display: flex; align-items: center; gap: 12px; }
.av-circulo { width: 62px; height: 62px; border-radius: 50%; border: 2px solid #F5A623; display: grid; place-items: center; font-size: 14px; font-weight: 600; flex: none; }
.av-recomendam p { font-size: 12px; color: var(--texto-suave); margin: 0; line-height: 1.4; }

.av-ordem { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.av-ordem label { font-size: 12px; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.av-ordem select { height: 38px; border: 1px solid var(--borda); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 12.5px; background: #fff; }

.av-item { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--borda); }
.av-item.escondida { display: none; }
.av-quem { display: grid; gap: 5px; font-size: 12px; color: var(--texto-suave); align-content: start; }
.av-inicial { width: 34px; height: 34px; border-radius: 50%; background: var(--fundo-alt); display: grid; place-items: center; font-size: 13px; color: var(--texto); }
.av-quem b { color: var(--texto); font-weight: 500; font-size: 12.5px; }
.av-verificada { color: #1f7a4d; font-size: 11px; }
.av-quem time { font-size: 11.5px; color: var(--texto-fraco); }
.av-conteudo h3 { font-size: 13.5px; font-weight: 600; margin: 8px 0 6px; }
.av-conteudo p { font-size: 13px; line-height: 1.55; color: var(--texto-suave); margin: 6px 0 10px; }
.av-recomenda { display: inline-block; font-size: 11.5px; color: #1f7a4d; border: 1px solid rgba(31,122,77,.35); border-radius: 4px; padding: 3px 8px; }
.av-util { display: inline-block; margin-left: 10px; font-size: 11.5px; color: var(--texto-fraco); }
.av-resposta { margin: 12px 0 0; padding: 12px 14px; background: var(--fundo-alt); border-radius: 6px; }
.av-resposta b { font-size: 12px; }
.av-resposta p { margin: 4px 0 0; font-size: 12.5px; }
#av-mais { margin: 24px auto 0; display: block; }

@media (max-width: 860px) {
  .av-grade { grid-template-columns: 1fr; gap: 28px; }
  .av-item { grid-template-columns: 1fr; gap: 10px; }
  .av-quem { grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 10px; }
  .av-inicial { width: 28px; height: 28px; }
}
/* ---------- "Detalhes que abraçam o seu corpo" (igual à origem) ---------- */
.detalhes-corpo { padding: 22px 0; border-top: 1px solid var(--borda); }
.detalhes-corpo h2 { font-family: var(--corpo); font-size: 13px; font-weight: 600; margin: 0 0 14px; }
.detalhes-corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.detalhes-corpo li { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--texto-suave); }
.detalhes-corpo img { width: 20px; height: 20px; flex: none; }

/* ---------- acordeões de descrição/medidas/composição ---------- */
.sanfona { border-top: 1px solid var(--borda); }
.sanfona summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::after { content: '+'; font-size: 17px; font-weight: 300; color: var(--texto-suave); }
.sanfona[open] summary::after { content: '−'; }
.sanfona > *:not(summary) { padding-bottom: 20px; }
.sanfona-texto { font-size: 12.5px; line-height: 1.65; color: var(--texto-suave); margin: 0 0 10px; }
.sanfona-texto b { color: var(--texto); font-weight: 500; }
.sanfona .descricao { padding-left: 18px; }
/* ---------- "Complete o look" (igual à origem) ---------- */
.combo .titulo-secao em { font-style: italic; }
.combo-sub { font-size: 13px; color: var(--texto-suave); margin: -10px 0 24px; }
.combo-linha { display: grid; grid-template-columns: 1fr auto 1fr auto 240px; gap: 18px; align-items: center; }
.combo-item { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.combo-item img { width: 150px; aspect-ratio: var(--foto); object-fit: cover; border-radius: 6px; background: var(--fundo-alt); }
.combo-tag { position: absolute; left: 14px; bottom: 14px; background: var(--texto); color: #fff; font-size: 10px; font-style: normal; padding: 4px 8px; border-radius: 4px; }
.combo-dados { display: grid; gap: 9px; align-content: start; }
.combo-nome { font-size: 13px; line-height: 1.4; }
.combo-preco { margin: 0; font-size: 14px; }
.combo-preco s { color: var(--texto-fraco); font-size: 12px; }
.combo-sku { height: 40px; border: 1px solid var(--borda); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 12.5px; background: #fff; }
.combo-add { height: 40px; font-size: 11px; }
.combo-mais, .combo-igual { font-size: 22px; color: var(--texto-suave); text-align: center; }
.combo-total { background: var(--fundo-alt); border-radius: 10px; padding: 22px 18px; text-align: center; }
.combo-total p { font-size: 12.5px; color: var(--texto-suave); margin: 0 0 6px; }
.combo-total strong { display: block; font-family: var(--titulo); font-size: 24px; margin-bottom: 14px; }
.combo-total .btn { width: 100%; height: 44px; font-size: 11.5px; }

@media (max-width: 1000px) {
  .combo-linha { grid-template-columns: 1fr; }
  .combo-mais, .combo-igual { display: none; }
}