/* Página de produto (/produto/...). Só usada por ela; a vitrine não carrega. */

.pp { padding: 18px 0 36px; }
.pp-migalha { font-size: .8125rem; color: var(--tinta-2); margin-bottom: 14px; }
.pp-grade { display: grid; gap: 18px; }
.pp-foto {
  position: relative; aspect-ratio: 1; background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}
.pp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pp-info { display: flex; flex-direction: column; gap: 10px; }
.pp-info .cat { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); font-weight: 600; }
.pp-info h1 { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.pp-preco { font-family: var(--display); font-weight: 700; font-size: 1.75rem; color: var(--rosa); }
.pp-estoque { margin: 0; font-size: .875rem; color: var(--ok); font-weight: 600; }
.pp-estoque.esgotado { color: var(--tinta-2); }
.pp-envio { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-2); font-size: .875rem; }
.pp-envio li + li { margin-top: 4px; }
.pp-voltar { font-size: .875rem; margin-top: 4px; }

@media (min-width: 720px) {
  .pp-grade { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .pp-info h1 { font-size: 2rem; }
}