/*
 * Prohall — produtos.php: classes exclusivas desta página
 * (padrões que só aparecem aqui; o que se repete em outras páginas está em
 * assets/css/components.css). Nenhum style="" deveria sobrar em produtos.php.
 *
 * Observação: .ph-g4, .ph-cta e .ph-btn-lightline são "hooks" compartilhados
 * (prohall.css já tem o @media/:hover deles) mas nenhum arquivo compartilhado
 * ainda define a declaração base (desktop). Como não podemos editar
 * components.css/prohall.css neste momento, a base entra aqui com o mesmo
 * nome de classe — se outra página também precisar, duplicar por enquanto
 * é aceitável (consolidar depois em components.css).
 */

.ph-cta{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center}
.ph-btn-lightline{font:700 14px 'Manrope',sans-serif;color:#fff;padding:15px 28px;border:1.5px solid rgba(255,255,255,.35);border-radius:9px;text-decoration:none;text-align:center}

/* 1. hero */
.produtos-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.72) 48%,rgba(10,10,10,.4) 100%)}
.produtos-hero-inner{position:relative;padding:96px 40px 88px}
.produtos-hero-title{font:800 52px/1.05 'Manrope',sans-serif;letter-spacing:-1.8px;margin:24px 0 0;max-width:760px;text-wrap:balance}
.produtos-hero-lead{font:400 16.5px/1.7 'Manrope',sans-serif;color:rgba(255,255,255,.82);max-width:640px;margin:22px 0 0}

/* 2. busca */
.produtos-search-section{border-bottom:1px solid rgba(0,0,0,.07)}
.produtos-search-row{padding:28px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.produtos-search-box{position:relative;flex:0 0 auto;width:360px;max-width:100%}
.produtos-search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%)}
.produtos-search-input{padding-left:42px}
.produtos-count{font:700 13px 'Manrope',sans-serif;color:#8a8a8a;white-space:nowrap}

/* 3. grid (vindo do banco) */
.produtos-grid-wrap{padding:44px 40px 84px}
.produtos-empty-msg{text-align:center;font:400 15px 'Manrope',sans-serif;color:#8a8a8a;padding:40px 0}
.produtos-hidden{display:none}

.produtos-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit}
.produtos-card-imgwrap{position:relative;height:280px;background:#f6f6f8;border-bottom:1px solid rgba(0,0,0,.06);overflow:hidden}
.produtos-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.produtos-card-title{font:700 17px 'Manrope',sans-serif;letter-spacing:-.3px;margin:0}
.produtos-card-more{margin-top:auto;padding-top:16px;font:700 11.5px 'Manrope',sans-serif;letter-spacing:.5px;color:#9a9a9a}

/* 4. cta */
.produtos-cta-section{background:#141414;color:#fff}
.produtos-cta-inner{padding:64px 40px}
.produtos-cta-title{font:800 34px/1.08 'Manrope',sans-serif;letter-spacing:-1.2px;margin:0}
.produtos-cta-text{font:400 15.5px/1.65 'Manrope',sans-serif;color:#a8a8a8;max-width:520px;margin:14px 0 0}
.produtos-cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.produtos-btn-loja{font:700 14px 'Manrope',sans-serif;color:#141414;background:#fff;text-align:center}

/* ---- Responsivo (mobile/tablet) ----
   Só o padding lateral por enquanto (padronizado em 24px em todas as
   páginas); o vertical continua no valor de desktop até ser revisado. */
@media (max-width:860px){
  .produtos-hero-inner,
  .produtos-search-row,
  .produtos-grid-wrap,
  .produtos-cta-inner{padding-left:24px;padding-right:24px}
}