/* ==========================================================
   LOJA INTEGRADA - Página de Produto
   Objetivo: evitar quebra feia de H2/H3/H4 no mobile
   Sem mexer no H1 (título do produto) e sem afetar menus
========================================================== */

/* Escopo seguro: só na página de produto e só no corpo */
.pagina-produto #corpo .conteiner h2,
.pagina-produto #corpo .conteiner h3,
.pagina-produto #corpo .conteiner h4 {
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin: 0 0 14px 0;

  /* Evita estouro e quebra feia */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  /* Evita uppercase forçado pelo tema */
  text-transform: none;

  /* Evita bug com spans internos ou inline-blocks */
  white-space: normal;
}

/* Tipografia fluida (responsiva sem ficar gigante) */
.pagina-produto #corpo .conteiner h2 { font-size: clamp(18px, 4.5vw, 26px); font-weight: 700; }
.pagina-produto #corpo .conteiner h3 { font-size: clamp(16px, 4vw, 22px);  font-weight: 600; }
.pagina-produto #corpo .conteiner h4 { font-size: clamp(15px, 3.6vw, 20px); font-weight: 600; }

/* Travamento mobile (garante leitura limpa em telas pequenas) */
@media (max-width: 480px) {
  .pagina-produto #corpo .conteiner h2 { font-size: 18px; line-height: 1.3; }
  .pagina-produto #corpo .conteiner h3 { font-size: 16px; }
  .pagina-produto #corpo .conteiner h4 { font-size: 15px; }
}

/* Segurança contra overflow horizontal dentro do corpo */
.pagina-produto #corpo .conteiner {
  max-width: 100%;
  overflow-x: hidden;
}