/* Vitrine da Ninee. Tokens e componentes básicos em base.css. Celular primeiro.
   Motivo visual: as "camadas" da impressão 3D (linhas finas horizontais) e a estrela do logo. */

:root {
  --camadas: repeating-linear-gradient(0deg, rgba(var(--framboesa-rgb), .07) 0 1px, transparent 1px 6px);
  --altura-topo: 56px;
}

/* ---------- faixa e topo ---------- */
.faixa-topo { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--framboesa); color: #fff; text-align: center; font: 600 .82rem/1.25 var(--fonte-titulo); padding: 6px var(--margem); letter-spacing: .02em; }
.faixa-estrela { width: 13px; height: 13px; flex: none; color: var(--creme); }
.topo { position: sticky; top: 0; z-index: 20; background: rgba(var(--creme-rgb), .92); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid rgba(217, 192, 168, .6); }
.topo-linha { display: flex; align-items: center; gap: 16px; height: var(--altura-topo); }
.topo-logo { display: block; margin-right: auto; }
.topo-logo img { width: 74px; height: auto; }
.topo-links { display: none; }
.topo-sacola { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--raio-pilula); color: var(--tinta); text-decoration: none; font: 600 .95rem var(--fonte-titulo); }
.topo-sacola:hover { background: var(--papel); color: var(--framboesa-escuro); }
.topo-sacola-texto { display: none; }
.topo-sacola-qtd { position: absolute; top: 3px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--framboesa); color: #fff; font: 800 .72rem/19px var(--fonte-texto); text-align: center; box-shadow: 0 0 0 2px var(--creme); }
@media (min-width: 760px) {
  :root { --altura-topo: 68px; }
  .topo-logo img { width: 92px; }
  .topo-links { display: flex; gap: 4px; }
  .topo-links a { padding: 8px 14px; border-radius: var(--raio-pilula); color: var(--tinta); text-decoration: none; font: 600 .98rem var(--fonte-titulo); }
  .topo-links a:hover { background: var(--papel); color: var(--framboesa-escuro); }
  .topo-sacola { padding: 0 16px; border: 1.5px solid var(--linha-forte); background: var(--papel); }
  .topo-sacola-texto { display: inline; }
  .topo-sacola-qtd { position: static; box-shadow: none; }
}

.menu-chips { padding-top: 12px; }
.icone-chip { width: 13px; height: 13px; flex: none; }

main { padding-top: 14px; padding-bottom: 56px; min-height: 60vh; }
[id] { scroll-margin-top: calc(var(--altura-topo) + 16px); } /* âncora (#produtos) não para embaixo do topo fixo */
.titulo-pagina { margin: 8px 0 20px; }
.voltar { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -4px; padding: 6px 4px; color: var(--tinta-suave); font-weight: 700; font-size: .92rem; text-decoration: none; }
.voltar:hover { color: var(--framboesa-escuro); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; display: grid; gap: 22px; padding: 26px 20px 22px; border-radius: 28px; background: var(--camadas), linear-gradient(160deg, var(--framboesa-luz) 0%, var(--framboesa-fundo) 55%, var(--framboesa-clara) 100%); }
.hero-texto { position: relative; z-index: 1; }
.hero-selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin-bottom: 14px; border-radius: var(--raio-pilula); background: rgba(255, 252, 248, .8); color: var(--framboesa-escuro); font: 700 .78rem var(--fonte-texto); letter-spacing: .04em; text-transform: uppercase; }
.hero h1 { font-size: clamp(1.7rem, 7.4vw, 3rem); line-height: 1.08; margin-bottom: 12px; }
.destaque-cor { color: var(--framboesa); }
.hero p { color: var(--tinta-suave); font-size: 1.05rem; margin-bottom: 20px; max-width: 34ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-enfeite { position: absolute; color: var(--framboesa); opacity: .14; pointer-events: none; }
.hero-enfeite-1 { width: 120px; height: 110px; right: -28px; top: -22px; transform: rotate(18deg); }
.hero-enfeite-2 { width: 46px; height: 42px; left: 52%; bottom: 46%; transform: rotate(-14deg); opacity: .18; }
.hero-fotos { position: relative; z-index: 1; display: flex; justify-content: center; padding: 6px 0 4px; }
.hero-foto { display: block; width: 36%; max-width: 210px; aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 5px solid var(--papel); box-shadow: 0 10px 30px rgba(58, 42, 46, .18); background: var(--papel); transition: transform .25s; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-foto:nth-child(1) { transform: rotate(-6deg) translateY(6px); z-index: 1; }
.hero-foto:nth-child(2) { transform: rotate(3deg) translateY(-4px); margin-left: -6%; z-index: 2; }
.hero-foto:nth-child(3) { transform: rotate(8deg) translateY(10px); margin-left: -6%; z-index: 1; }
.hero-foto:hover { transform: rotate(0) translateY(-4px) scale(1.03); z-index: 3; }
.hero-fotos-1 .hero-foto { width: 64%; }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; padding: 56px 48px; gap: 32px; }
  .hero-foto { width: 46%; }
}

.destaque { position: relative; overflow: hidden; border-radius: 28px; background: var(--camadas), var(--framboesa-fundo); }
.destaque-texto { position: relative; padding: 32px 24px 28px; max-width: 560px; }
.destaque h1 { margin-bottom: 8px; }
.destaque p { font-size: 1.05rem; color: var(--tinta-suave); margin-bottom: 20px; }
.destaque.com-imagem { background: var(--tinta); min-height: 300px; display: flex; align-items: flex-end; }
.destaque-imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque.com-imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58,42,46,0) 30%, rgba(58,42,46,.8) 100%); }
.destaque.com-imagem .destaque-texto { z-index: 1; }
.destaque.com-imagem h1, .destaque.com-imagem p { color: #fff; }
@media (min-width: 760px) { .destaque-texto { padding: 48px; } .destaque.com-imagem { min-height: 400px; } }

/* ---------- carrossel de destaques (banners) ---------- */
/* um cartão com cantos arredondados e o mesmo respiro lateral da página, também no celular */
.carrossel { position: relative; }
.carrossel-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--raio-g); }
.carrossel-trilho::-webkit-scrollbar { display: none; }
@media (pointer: fine) { .carrossel:has(.carrossel-pontos) .carrossel-trilho { cursor: grab; } }
.carrossel-trilho.arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
.banner { position: relative; flex: 0 0 100%; scroll-snap-align: center; overflow: hidden; aspect-ratio: 4 / 5; max-height: 62svh; background: var(--camadas), linear-gradient(160deg, var(--framboesa-luz), var(--framboesa-fundo)); isolation: isolate; }
.banner-fundo, .banner-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner-fundo img { object-fit: cover; }
.banner-3d { position: absolute; inset: 3% 0 44% 0; z-index: 1; pointer-events: none; }
.banner-3d canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
.banner-3d.pronto canvas { opacity: 1; }
/* enquanto o 3D do destaque baixa (a imagem já está lá): rodinha no lugar do modelo, depois de um instante */
.banner-3d-carregando { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; opacity: 0; transition: opacity .3s;
  background: rgba(255, 252, 248, .55); box-shadow: 0 0 0 6px rgba(255, 252, 248, .55); }
.vitrine-3d .banner-3d:not(.pronto) .banner-3d-carregando { opacity: 1; transition-delay: .3s; }
.banner-3d.pronto .banner-3d-carregando { display: none; }
.banner-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 64px 22px 26px; display: grid; gap: 8px; justify-items: start; background: linear-gradient(180deg, rgba(251, 244, 236, 0) 0%, rgba(251, 244, 236, .9) 42%); }
.banner-texto h1, .banner-texto h2 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.6rem); line-height: 1.08; max-width: 18ch; }
.banner-texto p { margin: 0 0 6px; color: var(--tinta-suave); font-size: 1.02rem; max-width: 36ch; }
@media (max-width: 759px) { .banner-texto p { padding-right: 56px; } } /* livre do botão flutuante do WhatsApp */
.banner.texto-claro .banner-texto { background: linear-gradient(180deg, rgba(40, 22, 28, 0) 0%, rgba(40, 22, 28, .78) 45%); }
.banner.texto-claro h1, .banner.texto-claro h2 { color: #fff; }
.banner.texto-claro p { color: rgba(255, 255, 255, .9); }
/* pontos: o desenho é pequeno, mas cada um tem 28 px de área de toque */
.carrossel-pontos { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.carrossel-pontos button { pointer-events: auto; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 3px; border: 0; border-radius: var(--raio-pilula); background: none; cursor: pointer; }
.carrossel-pontos button::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgba(58, 42, 46, .28); box-shadow: 0 0 0 1.5px rgba(255, 252, 248, .55); transition: width .2s, background .2s; }
.carrossel-pontos button[aria-current="true"]::before { width: 22px; background: var(--framboesa); }
@media (max-width: 759px) { .carrossel:has(.carrossel-pontos) .banner-texto { padding-bottom: 38px; } } /* botão livre dos pontos */
.carrossel-seta { display: none; }
@media (min-width: 760px) { .carrossel-trilho { border-radius: 28px; } }
@media (min-width: 760px) {
  .banner { aspect-ratio: 21 / 9; max-height: 560px; }
  .banner-3d { inset: 3% 0 3% 30%; }
  .banner-texto { top: 0; right: auto; width: min(44%, 460px); padding: 40px 44px; align-content: center; background: linear-gradient(90deg, rgba(251, 244, 236, .88) 55%, rgba(251, 244, 236, 0)); }
  .banner.com-3d .banner-texto { width: min(36%, 420px); }
  .banner.texto-claro .banner-texto { background: linear-gradient(90deg, rgba(40, 22, 28, .72) 50%, rgba(40, 22, 28, 0)); }
  .carrossel-seta { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 252, 248, .9); color: var(--tinta); cursor: pointer; box-shadow: var(--sombra); }
  .carrossel-seta:hover { background: #fff; color: var(--framboesa-escuro); }
  .carrossel-seta.anterior { left: 14px; }
  .carrossel:has(.carrossel-seta) .banner-texto { padding-left: 76px; } /* a seta não cobre o título */
  .carrossel-seta.proxima { right: 14px; }
}

/* Palco (página inicial com 3D): nos primeiros N px de rolagem (--giro = Banner.giro_telas, no style do .palco, em
   base_loja.html) a página inteira fica parada, como na carga, e só o 3D gira; depois tudo rola normal. A página
   (.palco-conteudo) é sticky no topo e a .palco-folga, de N px, dá o espaço para ela ficar parada; no fim da página
   o conteúdo cobre a folga, então nunca sobra área vazia. Só vale com .ativo, que o banner3d.js põe quando o 3D
   funciona (sem WebGL, sem JS ou com prefers-reduced-motion, a página rola normal). */
.palco-folga { display: none; }
.palco.ativo .palco-conteudo { position: sticky; top: 0; }
.palco.ativo .palco-folga { display: block; height: var(--giro); }
/* âncoras (/#produtos): o conteúdo desce N px depois do trecho parado; a conta certa está no banner3d.js */
/* dica: no alto do banner, longe do botão e dos pontos (no computador, em cima do modelo, à direita do texto) */
.palco-dica { position: absolute; left: 50%; top: 12px; z-index: 3; transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--raio-pilula); background: rgba(255, 252, 248, .85); color: var(--tinta-suave); font: 700 .78rem var(--fonte-texto); white-space: nowrap; transition: opacity .4s; pointer-events: none; }
.palco.ativo .palco-dica { display: flex; }
@media (min-width: 760px) { .palco-dica { top: 16px; left: 65%; } }
.palco-dica svg { width: 14px; height: 14px; transform: rotate(90deg); animation: dica 1.4s ease-in-out infinite; }
@keyframes dica { 50% { transform: rotate(90deg) translateX(4px); } }
/* quanto o 3D já girou: linha do lado com uma bolinha que desce de 0 a 1 (--progresso, posto no .palco pelo
   banner3d.js); a parte já percorrida fica na cor da loja */
.giro-barra { display: none; position: absolute; z-index: 3; right: 16px; top: 14%; bottom: 46%; width: 4px; border-radius: 2px; background: rgba(58, 42, 46, .14); pointer-events: none; }
.palco.ativo .giro-barra { display: block; }
.giro-barra::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--progresso, 0) * 100%); border-radius: inherit; background: var(--framboesa); }
.giro-bolinha { position: absolute; left: 50%; top: calc(var(--progresso, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--framboesa); box-shadow: 0 0 0 3px rgba(255, 252, 248, .92), 0 1px 4px rgba(58, 42, 46, .25); }
.banner.texto-claro .giro-barra { background: rgba(255, 255, 255, .3); }
@media (min-width: 760px) { .giro-barra { right: 80px; top: 16%; bottom: 16%; } }  /* à esquerda da seta do carrossel */

/* ---------- vantagens ---------- */
.vantagens { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vantagens li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: var(--papel); text-align: center; font-size: .78rem; line-height: 1.25; color: var(--tinta-suave); }
.vantagens strong { display: block; color: var(--tinta); font: 600 .86rem/1.2 var(--fonte-titulo); }
.vantagem-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--framboesa-fundo); color: var(--framboesa); }
.vantagem-icone svg { width: 18px; height: 18px; }
@media (min-width: 760px) {
  .vantagens { gap: 14px; margin-top: 18px; }
  .vantagens li { flex-direction: row; justify-content: center; gap: 12px; padding: 16px; font-size: .9rem; text-align: left; }
  .vantagens strong { font-size: 1rem; }
  .vantagem-icone { width: 42px; height: 42px; flex: none; }
}

/* ---------- coleção em destaque ---------- */
.colecao-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 22px; padding: 20px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.14) 0 30%, transparent 31%), var(--framboesa-escuro); color: #fff; text-decoration: none; }
.colecao-card:hover { color: #fff; }
.colecao-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px); pointer-events: none; }
.colecao-texto { position: relative; z-index: 1; }
.colecao-card.com-imagem { min-height: 200px; grid-template-columns: 1fr; background: var(--vinho-escuro); }
.colecao-card.com-imagem::before { z-index: 1; background: linear-gradient(90deg, rgba(var(--vinho-escuro-rgb), .86) 0%, rgba(var(--vinho-escuro-rgb), .55) 45%, rgba(var(--vinho-escuro-rgb), 0) 75%); }
.colecao-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .colecao-card.com-imagem { min-height: 280px; } }
.colecao-rotulo { font: 700 .74rem var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.colecao-card h2 { margin: 2px 0 8px; font-size: 1.55rem; color: #fff; }
.colecao-prazo { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 4px 10px; border-radius: var(--raio-pilula); background: rgba(255,255,255,.16); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.colecao-link { display: flex; align-items: center; gap: 4px; font: 600 .98rem var(--fonte-titulo); }
.colecao-fotos { position: relative; display: flex; }
.colecao-fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 16px; border: 3px solid rgba(255,255,255,.9); transform: rotate(5deg); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.colecao-fotos img + img { margin-left: -30px; transform: rotate(-6deg) translateY(10px); }
@media (min-width: 760px) { .colecao-card { padding: 28px 32px; } .colecao-card h2 { font-size: 2rem; } .colecao-fotos img { width: 128px; height: 128px; } .colecao-fotos img + img { margin-left: -40px; } }

/* ---------- seções e grade ---------- */
.secao { margin: 34px 0; }
.secao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.titulo-secao { display: flex; align-items: center; gap: 8px; margin: 0; font-size: clamp(1.3rem, 4.8vw, 1.75rem); }
.titulo-secao .icone-p { color: var(--framboesa); }
.busca { position: relative; flex: 1 1 220px; max-width: 340px; }
.busca input { min-height: 44px; padding-left: 42px; border-radius: var(--raio-pilula); background: var(--papel); }
.busca-icone { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--tinta-suave); pointer-events: none; }

.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px var(--margem) 12px; margin: 0 calc(var(--margem) * -1); scrollbar-width: none; scroll-padding-inline: var(--margem); }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
@media (min-width: 700px) { .trilho { grid-auto-columns: minmax(200px, 23%); gap: 20px; } }

.card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--tinta); background: var(--papel); border: 1px solid rgba(217, 192, 168, .55); transition: transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { color: var(--tinta); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(58, 42, 46, .12); border-color: var(--framboesa-clara); }
.card-foto { position: relative; aspect-ratio: 1; background: var(--creme-claro); overflow: hidden; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-foto img { transform: scale(1.05); }
.card-selo { position: absolute; left: 8px; top: 8px; box-shadow: 0 2px 8px rgba(58,42,46,.12); }
.card-indisponivel .card-foto img { filter: grayscale(.6); opacity: .75; }
.card-info { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-nome { font: 600 .98rem/1.22 var(--fonte-titulo); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.card-preco .preco { font-size: 1.08rem; color: var(--framboesa-escuro); }
.card-preco .preco-de { display: block; font-size: .78rem; margin: 0; }
.card-cores { display: inline-flex; align-items: center; }
.card-cores .ponto-cor { margin-left: -4px; box-shadow: 0 0 0 2px var(--papel), inset 0 0 0 1px rgba(0,0,0,.15); }
.card-cores-mais { margin-left: 4px; font-size: .74rem; font-weight: 700; color: var(--tinta-suave); }
.ponto-cor { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--cor, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }

.sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--framboesa-clara); background: var(--camadas), linear-gradient(160deg, var(--creme-claro), var(--framboesa-fundo)); }
.sem-foto svg { width: 34%; height: 34%; }

.vazio { text-align: center; padding: 40px 20px; display: grid; justify-items: center; gap: 8px; }
.vazio-icone { width: 48px; height: 48px; color: var(--framboesa); }

/* ---------- como funciona e convites ---------- */
.como-funciona { padding: 26px 20px; border-radius: 28px; background: var(--papel); }
.passos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 16px; }
.passos li { display: flex; gap: 14px; align-items: flex-start; }
.passos strong { font: 600 1.05rem var(--fonte-titulo); }
.passos p { margin: 2px 0 0; color: var(--tinta-suave); font-size: .94rem; }
.passo-num { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--framboesa); color: #fff; font: 700 1.1rem var(--fonte-titulo); box-shadow: 0 0 0 5px var(--framboesa-fundo); }
@media (min-width: 760px) { .como-funciona { padding: 36px; } .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.convites { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .convites { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; } }
.convite { padding: 24px 20px; border-radius: 24px; display: grid; gap: 10px; justify-items: start; align-content: start; }
.convite h2 { margin: 0; }
.convite p { margin: 0 0 6px; color: var(--tinta-suave); }
.convite-ideia { background: var(--camadas), var(--framboesa-fundo); }
.convite-insta { background: var(--papel); border: 1px solid var(--linha); }

/* ---------- produto ---------- */
.produto { display: grid; gap: 20px; }
@media (min-width: 860px) { .produto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; } .galeria { position: sticky; top: calc(var(--altura-topo) + 16px); } }
.galeria { min-width: 0; }
.galeria-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--creme-claro); scrollbar-width: none; margin: 0 calc(var(--margem) * -1); }
@media (min-width: 600px) { .galeria-trilho { margin: 0; border-radius: 28px; } }
.galeria-trilho::-webkit-scrollbar { display: none; }
.galeria-foto { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 1; scroll-snap-align: center; }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-foto figcaption { position: absolute; left: 12px; bottom: 12px; }
.galeria-3d { background: var(--camadas), radial-gradient(circle at 50% 45%, #fffaf5 0%, var(--creme-claro) 60%, var(--framboesa-fundo) 100%); }
.galeria-3d canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity .5s; }
.galeria-3d canvas.pronto { opacity: 1; }
.galeria-3d canvas:active { cursor: grabbing; }
.galeria-3d .dica-3d { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--raio-pilula); background: rgba(255, 252, 248, .9); color: var(--tinta-suave); font: 700 .78rem var(--fonte-texto); pointer-events: none; }
.galeria-3d.sem-3d canvas, .galeria-3d.sem-3d .dica-3d, .galeria-3d.sem-3d .tela-cheia-3d { display: none; }
.galeria-3d .carregando-3d { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; margin: 0; padding: 24px; color: var(--tinta-suave); font: 700 .92rem var(--fonte-texto); text-align: center; pointer-events: none; }
.galeria-3d.visor-carregando::after { content: none; } /* a rodinha já está no "Carregando o 3D…" */
.galeria-3d.carregado .carregando-3d { display: none; }
.galeria-3d:not(.carregado) .dica-3d { visibility: hidden; }
.tela-cheia-3d { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--raio-pilula); background: rgba(255, 252, 248, .92); color: var(--tinta); font: 700 .85rem var(--fonte-texto); box-shadow: var(--sombra); cursor: pointer; }
.tela-cheia-3d:hover { color: var(--framboesa-escuro); }
.tela-cheia-3d[hidden] { display: none; }
/* tela cheia do 3D: o mesmo canvas da galeria vai para um quadro sobre a página, com zoom (produto3d.js) */
html.com-tela-3d { overflow: hidden; }
.tela-3d { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--camadas), radial-gradient(circle at 50% 45%, #fffaf5 0%, var(--creme-claro) 60%, var(--framboesa-fundo) 100%); }
.tela-3d[hidden] { display: none; }
.tela-3d-titulo { margin: 0; padding: calc(18px + env(safe-area-inset-top)) 76px 0 var(--margem); font: 600 1.1rem/1.2 var(--fonte-titulo); color: var(--tinta); }
.tela-3d-fechar { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 252, 248, .95); color: var(--tinta); box-shadow: var(--sombra); cursor: pointer; }
.tela-3d-fechar:hover { color: var(--framboesa-escuro); }
.tela-3d-palco { position: relative; min-height: 0; }
.tela-3d-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.tela-3d-palco canvas:active { cursor: grabbing; }
.tela-3d-dica { justify-self: center; margin: 0 var(--margem) calc(16px + env(safe-area-inset-bottom)); padding: 8px 14px; border-radius: var(--raio-pilula); background: rgba(255, 252, 248, .92); color: var(--tinta-suave); font: 700 .85rem var(--fonte-texto); text-align: center; pointer-events: none; }
@media (pointer: fine) { .tela-3d-dica .so-toque { display: none; } }
@media not (pointer: fine) { .tela-3d-dica .so-mouse { display: none; } }
.mini-3d { display: grid; place-items: center; width: 100%; height: 100%; background: var(--framboesa-fundo); color: var(--framboesa-escuro); font: 700 1.1rem var(--fonte-titulo); }
/* celular: setas e pontos embaixo da foto. No 3D, arrastar para o lado gira o modelo; as setas trazem de volta. */
/* miniaturas embaixo da foto: no celular numa faixa que rola de lado (a ativa fica sempre à vista); no computador
   quebram em linhas. A do 3D é um quadradinho com o selo "3D". */
.galeria-miniaturas { display: flex; gap: 8px; margin: 10px calc(var(--margem) * -1) 0; padding: 2px var(--margem) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--margem); scrollbar-width: none; }
.galeria-miniaturas::-webkit-scrollbar { display: none; }
.galeria-miniaturas button { flex: 0 0 auto; width: 60px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: var(--creme-claro); cursor: pointer; opacity: .72; scroll-snap-align: start; transition: opacity .15s, border-color .15s; }
.galeria-miniaturas button:hover { opacity: 1; }
.galeria-miniaturas button[aria-current="true"] { border-color: var(--framboesa); opacity: 1; }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 600px) { .galeria-miniaturas { margin: 12px 0 0; padding: 2px 0 4px; } }
@media (min-width: 860px) {
  .galeria-miniaturas { flex-wrap: wrap; gap: 10px; overflow: visible; }
  .galeria-miniaturas button { width: 72px; height: 72px; }
}

.produto-info h1 { margin-bottom: 6px; font-size: clamp(1.6rem, 6vw, 2.3rem); }
.produto-preco { margin-bottom: 10px; }
.produto-preco .preco-g { color: var(--framboesa-escuro); }
.disponibilidade { margin: 0 0 18px; }
.escolhas { padding: 16px; margin-bottom: 18px; border-radius: 22px; background: var(--papel); border: 1px solid rgba(217, 192, 168, .55); }
.escolhas-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 1rem var(--fonte-titulo); color: var(--framboesa-escuro); }
.escolha { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.escolha:last-of-type { margin-bottom: 0; }
.escolha legend { width: 100%; padding: 0; }
legend.escolhas-titulo { margin-bottom: 12px; }
/* cada cor é uma pílula: bolinha à esquerda e o nome ao lado, numa linha só (2 por linha no celular);
   a escolhida ganha borda e fundo na cor da loja e um ✓ na bolinha */
.escolhas .cores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) and (max-width: 859px) { .escolhas .cores { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.escolhas .cor { flex-direction: row; gap: 8px; width: auto; min-width: 0; min-height: 44px; padding: 4px 10px 4px 6px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--papel); text-align: left; transition: border-color .15s, background-color .15s; -webkit-tap-highlight-color: transparent; }
.escolhas .cor:hover { border-color: var(--tinta-suave); }
.escolhas .bolinha { position: relative; width: 26px; height: 26px; flex: none; box-shadow: inset 0 0 0 1px rgba(58, 42, 46, .2); }
.escolhas .cor input:checked + .bolinha { box-shadow: inset 0 0 0 1px rgba(58, 42, 46, .2); transform: none; }
.escolhas .cor input:checked + .bolinha::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--framboesa-fundo);
  background: var(--framboesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5.5 12.5l4.2 4.2 8.8-9.2'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* o nome cabe numa linha a partir de 390 px; em tela mais estreita quebra dentro da pílula (sem cortar o nome) */
.escolhas .cor-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; font-size: .875rem; font-weight: 700; line-height: 1.15; color: var(--tinta); }
.escolhas .cor input:checked ~ .cor-nome { color: var(--framboesa-escuro); font-weight: 700; }
.escolhas .cor:has(input:checked) { border-color: var(--framboesa); background: var(--framboesa-fundo); box-shadow: inset 0 0 0 1px var(--framboesa); }
@supports selector(:has(a)) {
  .escolhas .cor input:focus-visible + .bolinha { outline: 0; }
  .escolhas .cor:has(input:focus-visible) { outline: 3px solid var(--framboesa); outline-offset: 2px; }
}
/* cor em falta que ainda tem peça pronta: linha inteira, com o aviso ao lado do nome */
.escolhas .cor-so-pronta { grid-column: 1 / -1; }
.so-pronta { flex: none; margin-left: auto; padding: 2px 9px; border-radius: var(--raio-pilula); background: var(--verde-fundo); color: var(--verde); font-size: .75rem; font-weight: 800; line-height: 1.4; white-space: nowrap; }
/* kit: cabeça de cada peça com a cor escolhida ("Rena 2 · Verde Natal"); com JS vira acordeão (loja.js), sem JS fica tudo aberto */
.escolha-cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; }
.escolha-cabeca .bolinha { width: 22px; height: 22px; }
.escolha-peca { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolha-atual { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-suave); font-weight: 600; }
.escolha-seta { display: none; margin-left: auto; color: var(--tinta-suave); transform: rotate(90deg); transition: transform .2s; }
html:not(.js) .escolha-cabeca .bolinha, html:not(.js) .escolha-atual { display: none; }
.acordeao .escolhas-titulo { margin-bottom: 6px; }
.acordeao .escolha { margin: 0; scroll-margin: calc(var(--altura-topo) + 12px) 0 96px; }
/* a linha entre as peças vai na legenda: a borda do fieldset passa no meio dela */
.acordeao .escolha-cabeca { display: block; margin: 0; box-shadow: 0 -1px 0 var(--linha); }
.escolha-botao { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 6px 2px; border: 0; border-radius: var(--raio-p); background: none; color: var(--tinta); font: inherit; font-weight: 700; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acordeao .escolha-seta { display: block; }
.acordeao .aberta .escolha-seta { transform: rotate(-90deg); }
.acordeao .aberta .escolha-peca { color: var(--framboesa-escuro); }
.acordeao .cores { padding: 2px 0 14px; }
.acordeao .partes-fixas { margin-top: 0; }
/* resumo da combinação no título do kit: uma bolinha por peça, na ordem */
.kit-resumo { display: flex; flex: none; margin-left: auto; padding-left: 8px; }
.kit-resumo .bolinha { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--papel), inset 0 0 0 1px rgba(58, 42, 46, .2); }
.kit-resumo .bolinha + .bolinha { margin-left: -5px; }
.partes-fixas { list-style: none; padding: 12px 0 0; margin: 14px 0 0; border-top: 1px dashed var(--linha); display: grid; gap: 4px; font-weight: 600; }
.produto-form .campo { margin-bottom: 18px; }

.comprar { display: flex; gap: 10px; align-items: center; }
.comprar-botao { flex: 1; }
.comprar-preco { display: none; }
.rotulo-curto { display: none; }
.quantidade { display: inline-flex; align-items: center; gap: 2px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--papel); padding: 2px; }
.quantidade .btn-icone { min-height: 42px; width: 42px; border: 0; background: transparent; }
.quantidade .btn-icone:hover { background: var(--creme-claro); }
.quantidade input { width: 36px; min-height: 42px; padding: 0; border: 0; background: transparent; text-align: center; font-weight: 800; -moz-appearance: textfield; }
.quantidade input::-webkit-inner-spin-button, .quantidade input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantidade input:focus { box-shadow: none; }
.quantidade-p .btn-icone { min-height: 34px; width: 34px; }
.quantidade-valor { min-width: 28px; text-align: center; font-weight: 800; }
.quantidade form { display: contents; }
@media (max-width: 859px) {
  /* no celular a barra de comprar fica sempre grudada embaixo da tela (não só enquanto as escolhas estão à vista);
     o body ganha a altura dela embaixo para o rodapé não ficar escondido */
  body.pagina-produto { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .pagina-produto .comprar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 252, 248, .97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--linha); box-shadow: 0 -6px 20px rgba(58, 42, 46, .06); }
  .pagina-produto .comprar-preco { display: block; font: 700 1.1rem var(--fonte-titulo); color: var(--framboesa-escuro); white-space: nowrap; }
  .pagina-produto .comprar .quantidade .btn-icone { width: 34px; }
  .pagina-produto .comprar-botao { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 859px) { .pagina-produto .rotulo-longo { display: none; } .pagina-produto .rotulo-curto { display: inline; } }

.produto-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
/* selos de confiança: cartõezinhos lado a lado, com ícone num círculo (como as vantagens da home) */
.confianca { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.confianca li { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 18px; background: var(--papel); text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.25; color: var(--tinta-suave); }
.confianca-icone, .ficha-icone { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--framboesa-fundo); color: var(--framboesa); }
.confianca-icone svg, .ficha-icone svg { width: 18px; height: 18px; }
.produto-descricao { margin-bottom: 22px; font-size: 1.02rem; line-height: 1.6; }
.produto-descricao p { margin: 0 0 10px; }
/* detalhes: medidas em destaque e linhas com ícone, rótulo pequeno em cima e o valor embaixo (nada espremido) */
.detalhes-titulo { margin: 0 0 10px; font: 700 1.15rem var(--fonte-titulo); }
.medidas { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.medidas li { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; background: var(--papel); border: 1px solid rgba(217, 192, 168, .55); text-align: center; }
.medida-valor { font: 700 1.2rem var(--fonte-titulo); color: var(--tinta); white-space: nowrap; }
.medida-valor small { font: 700 .78rem var(--fonte-texto); color: var(--tinta-suave); }
.medida-nome { font-size: .76rem; font-weight: 700; color: var(--tinta-suave); }
.ficha { list-style: none; margin: 0; padding: 4px 16px; display: grid; border-radius: 20px; background: var(--papel); border: 1px solid rgba(217, 192, 168, .55); }
.ficha > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.ficha > li + li { border-top: 1px solid var(--linha); }
.ficha > li > div { display: grid; gap: 1px; min-width: 0; padding-top: 1px; }
.ficha-nome { font-size: .78rem; font-weight: 800; color: var(--tinta-suave); }
.ficha strong { font: 700 1.05rem var(--fonte-titulo); color: var(--tinta); }
.ficha-mais { display: grid; font-size: .86rem; line-height: 1.4; color: var(--tinta-suave); }  /* um detalhe por linha */
.ficha-texto { font-size: .95rem; }

/* ---------- sacola e finalizar ---------- */
.checkout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; } .resumo { position: sticky; top: calc(var(--altura-topo) + 16px); } }
.checkout h2 { font-size: 1.2rem; }
.itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.item-erro { border-color: #e3b4b4; }
.item-foto { display: block; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--creme-claro); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-info { min-width: 0; display: grid; gap: 6px; align-content: start; }
.item-info > .selo, .pedido-itens .selo { justify-self: start; }
.item-nome { font-size: 1.05rem; margin: 0; }
.item-nome a { color: inherit; text-decoration: none; }
.item-cores { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: .9rem; color: var(--tinta-suave); }
.item-cores li { display: flex; align-items: center; gap: 6px; }
.item-cores .ponto-cor { width: 12px; height: 12px; }
.item-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.item-preco { font: 700 1.1rem var(--fonte-titulo); }
.item-remover { margin: 0; }
.resumo { display: grid; gap: 12px; }
.resumo h2 { margin: 0; }
.cupom { display: flex; gap: 8px; margin: 0; }
.cupom .aviso { width: 100%; justify-content: space-between; align-items: center; margin: 0; }
.tabela-resumo { width: 100%; border-collapse: collapse; }
.tabela-resumo th, .tabela-resumo td { padding: 6px 0; font-weight: 600; }
.tabela-resumo th { text-align: left; color: var(--tinta-suave); }
.tabela-resumo td { text-align: right; white-space: nowrap; }
.tabela-resumo .desconto td { color: var(--verde); }
.tabela-resumo .total th, .tabela-resumo .total td { padding-top: 12px; border-top: 1px solid var(--linha); color: var(--tinta); font: 700 1.25rem var(--fonte-titulo); }
.previsao { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--framboesa-fundo); color: var(--framboesa-escuro); font-weight: 600; }
.previsao > span { min-width: 0; } /* o texto todo num span só: com flex, cada pedaço viraria uma coluna */
.resumo-itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.resumo-itens li { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.resumo-preco { flex: none; white-space: nowrap; }
.resumo-itens small { display: block; font-weight: 500; }
.pagamento-info { padding: 12px; border-radius: 14px; background: var(--creme-claro); }
.aceite { font-weight: 600; }
.opcoes-entrega { display: grid; gap: 8px; margin-bottom: 16px; }
.opcao { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); cursor: pointer; font-weight: 600; background: var(--papel); }
.opcao:has(input:checked) { border-color: var(--framboesa); background: var(--framboesa-fundo); }
.opcao-ajuda { display: block; margin-top: 2px; font-weight: 500; font-size: .86rem; color: var(--tinta-suave); }
.campo-recuado { margin: 12px 0 0 30px; }
.espaco-cima { margin-top: 16px; }
.icone-inline { display: inline-block; vertical-align: -3px; color: var(--framboesa); }
.obrigatorio { color: var(--framboesa-escuro); }
.com-erro input, .com-erro select, .com-erro textarea { border-color: #c24545; }

/* ---------- pedido ---------- */
.pedido { display: grid; gap: 16px; }
.pedido.estreito { margin-inline: auto; }
.pedido-topo { text-align: center; padding: 12px 0 4px; }
.pedido-topo p { margin: 0; }
.pedido-estrela { width: 52px; height: 48px; margin: 0 auto 10px; color: var(--framboesa); animation: pulo .6s ease-out; }
@keyframes pulo { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.passo h2 { display: flex; align-items: center; gap: 10px; }
.passo-numero { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--framboesa); color: #fff; font-size: 1rem; flex: none; }
.passo { display: grid; gap: 12px; }
.passo p { margin: 0; }
.valor-pix { font: 700 2rem var(--fonte-titulo); }
.pix-codigo { font: 14px/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; word-break: break-all; min-height: 0; background: var(--creme-claro); }
.qr summary { cursor: pointer; font-weight: 700; color: var(--framboesa-escuro); padding: 6px 0; }
.qr-imagem { width: min(260px, 100%); margin: 10px auto 0; padding: 12px; background: #fff; border-radius: var(--raio); }
.qr-imagem svg { width: 100%; height: auto; }
.pedido-itens { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.pedido-itens > li { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.linha-tempo li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--tinta-suave); }
.linha-tempo li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: var(--linha-forte); z-index: 0; }
.linha-tempo li:first-child::before { display: none; }
.linha-tempo li.feito::before { background: var(--framboesa); }
.linha-tempo-ponto { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--creme); border: 3px solid var(--linha-forte); color: #fff; }
.linha-tempo li.feito .linha-tempo-ponto { background: var(--framboesa); border-color: var(--framboesa); }
.linha-tempo li.atual { color: var(--tinta); }
.linha-tempo-ponto svg { width: 14px; height: 14px; }

/* ---------- páginas de texto ---------- */
.pagina-texto { padding: 8px 0; }
.pagina-texto h2 { margin-top: 28px; color: var(--framboesa-escuro); }
.pagina-texto ul { padding-left: 1.2em; }
.pagina-texto li + li { margin-top: 6px; }

/* ---------- rodapé ---------- */
.rodape { background: var(--camadas), var(--vinho); color: var(--creme); padding: 40px 0 0; }
.rodape a { color: var(--creme); }
.rodape a:hover { color: #fff; }
.rodape-grade { display: grid; gap: 28px; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape-logo { width: 96px; margin-bottom: 12px; }
.rodape-marca p { margin-bottom: 14px; opacity: .9; }
.rodape-redes { display: flex; gap: 10px; }
.rodape-redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(246, 232, 216, .14); }
.rodape-redes a:hover { background: rgba(246, 232, 216, .26); }
.rodape-links { display: grid; gap: 8px; align-content: start; }
.rodape-links a { font-weight: 600; text-decoration: none; opacity: .92; }
.rodape-links a:hover { opacity: 1; text-decoration: underline; }
.rodape-titulo { font: 600 1rem var(--fonte-titulo); margin-bottom: 2px; color: #fff; }
.rodape-legal { margin-top: 30px; padding: 16px var(--margem) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(246, 232, 216, .2); font-size: .82rem; opacity: .8; }

.whats-flutuante { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--whatsapp); color: #fff; box-shadow: 0 8px 24px rgba(23, 115, 62, .35); }
.whats-flutuante:hover { color: #fff; background: #125e33; }
.whats-flutuante .icone { width: 26px; height: 26px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: var(--raio-pilula); background: var(--tinta); color: #fff; font-weight: 700; box-shadow: var(--sombra-forte); max-width: calc(100vw - 32px); text-align: center; }

/* ---------- textos e marca configuráveis (painel › Configurações) ---------- */
a.faixa-topo { text-decoration: none; }
a.faixa-topo:hover { color: #fff; text-decoration: underline; }
.faixa-pausa a { color: #fff; font-weight: 700; white-space: nowrap; }
.faixa-pausa a:hover { color: var(--creme); }
.topo-logo img.logo-enviado { width: auto; height: 34px; max-width: 160px; object-fit: contain; }
@media (min-width: 760px) { .topo-logo img.logo-enviado { height: 40px; max-width: 200px; } }
.rodape-logo.logo-enviado { width: auto; max-width: 140px; max-height: 56px; object-fit: contain; }
.passo-num svg { width: 20px; height: 20px; }
.aviso-pausa { margin: -4px 0 14px; font-size: .92rem; }
.prazo-colecao { margin: -6px 0 14px; }
.lista-capa { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; border-radius: 22px; margin: 4px 0 16px; background: var(--creme-claro); }


/* ---------- conversão: selos, promoção, entrega grátis, cupom, leve junto, depoimentos ---------- */
.card-selos { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.card-selos .card-selo { position: static; max-width: 100%; }
.selo-livre { background: var(--papel); color: var(--framboesa-escuro); }
.card-promo { display: block; margin-top: 3px; font: 700 .74rem/1.2 var(--fonte-texto); color: var(--framboesa-escuro); }
.produto-selo { margin-bottom: 8px; border: 1px solid var(--framboesa-clara); }
.produto-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.produto-preco .preco-de { margin-right: 0; }
.produto-promo { align-self: center; }

.barra-frete { display: grid; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--raio); background: var(--framboesa-fundo); color: var(--framboesa-escuro); font-weight: 700; }
.barra-frete p { display: flex; align-items: center; gap: 8px; margin: 0; }
.barra-frete-trilho { display: block; height: 8px; border-radius: var(--raio-pilula); background: rgba(var(--framboesa-rgb), .16); overflow: hidden; }
.barra-frete-trilho > span { display: block; height: 100%; min-width: 8px; border-radius: inherit; background: var(--framboesa); transition: width .4s; }
.barra-frete.garantido { background: var(--verde-fundo); color: var(--verde); }
.barra-frete.garantido .barra-frete-trilho { background: rgba(39, 107, 67, .16); }
.barra-frete.garantido .barra-frete-trilho > span { background: var(--verde); }
.barra-frete-produto { margin: 14px 0 0; font-size: .92rem; }

.cupom-abrir summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; color: var(--framboesa-escuro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.cupom-abrir summary::-webkit-details-marker { display: none; }
.cupom-abrir[open] summary { margin-bottom: 6px; }
.cupom input { flex: 1; min-width: 0; }
.cupom-espera { display: flex; gap: 10px; }

.leve-junto { margin-top: 28px; }
.leve-junto .titulo-secao { margin-bottom: 12px; }
.leve-junto-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .leve-junto-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .leve-junto-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.leve-junto-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
@media (min-width: 1000px) { .leve-junto-item { grid-template-columns: 1fr; } .leve-junto-foto { width: 100%; height: auto; aspect-ratio: 1; } }
.leve-junto-foto { display: block; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--creme-claro); }
.leve-junto-foto img { width: 100%; height: 100%; object-fit: cover; }
.leve-junto-info { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.leve-junto-nome { font: 600 1rem/1.2 var(--fonte-titulo); color: var(--tinta); text-decoration: none; }
.leve-junto-nome:hover { color: var(--framboesa-escuro); }
.leve-junto-info .preco { font-size: 1.05rem; color: var(--framboesa-escuro); }
.leve-junto-info .preco-de { font-size: .8rem; }
.leve-junto-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }

.depoimentos-lista { list-style: none; margin: 0 calc(var(--margem) * -1); padding: 2px var(--margem) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem); scrollbar-width: none; }
.depoimentos-lista::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .depoimentos-lista { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 20px; } }
.depoimento { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--papel); border: 1px solid rgba(217, 192, 168, .55); }
.depoimento-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--creme-claro); }
.depoimento-texto { margin: 0; font-size: 1rem; line-height: 1.5; }
.depoimento-texto::before { content: "“"; display: block; height: .55em; font: 700 2.4rem/1 var(--fonte-titulo); color: var(--framboesa); }
.depoimento-quem { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .92rem; }
.depoimento-produto { font-weight: 700; font-size: .86rem; }

.toast-sacola { display: flex; align-items: center; gap: 14px; width: max-content; text-align: left; border-radius: var(--raio); }
.toast-sacola a { color: #fff; font-weight: 800; white-space: nowrap; }
@media (max-width: 859px) { .pagina-produto .toast { bottom: calc(86px + env(safe-area-inset-bottom)); } }
@keyframes pular { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
.topo-sacola.pulou .topo-sacola-qtd { animation: pular .45s ease; }

/* ---------- fotos: esqueleto creme com um brilho passando até a foto chegar, e a foto entra suave (sem pulo: as
   caixas já têm a proporção certa). .js e .carregou vêm do script do base.html; a foto principal (sem lazy) não
   espera o fade. O brilho anda por transform (não redesenha a página). */
.card-foto::before, .galeria-foto:not(.galeria-3d)::before, .hero-foto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 252, 248, .8) 50%, transparent 70%);
  animation: esqueleto 1.5s ease-in-out infinite;
}
@keyframes esqueleto { to { transform: translateX(100%); } }
.card-foto:has(> img.carregou)::before, .galeria-foto:has(> img.carregou)::before, .hero-foto:has(> img.carregou)::before,
.card-foto:has(> .sem-foto)::before, .galeria-foto:has(> .sem-foto)::before { content: none; }
.galeria-foto:not(.galeria-3d) { overflow: hidden; }
.card-foto img, .galeria-foto img, .hero-foto img { position: relative; }
.js .card-foto img, .js .galeria-foto img[loading=lazy], .js .depoimento-foto, .js .colecao-fotos img { transition: opacity .35s, transform .4s; }
.js .card-foto img:not(.carregou), .js .galeria-foto img[loading=lazy]:not(.carregou), .js .depoimento-foto:not(.carregou),
.js .colecao-fotos img:not(.carregou) { opacity: 0; }