/* ──────────────────────────────────────────────────────────────────────────
   NATUMASTER · SKIN (design por cliente). Ajustes de HOME/design ficam aqui,
   NUNCA no engine (calderon 12/06/2026). Carrega via bcx-skin.php.
   ────────────────────────────────────────────────────────────────────────── */

/* 1a trust bar do topo (.bcx-nm-benefit): alinhar à ESQUERDA e usar as MESMAS
   fontes do trust do rodapé (.bcx-ft-benefit): título caixa-alta, fonte de corpo. */
.bcx-nm-benefit{ justify-content:flex-start !important; }
.bcx-nm-benefit b{
  font-family: var(--bcx-font-body, 'Inter'), system-ui, sans-serif !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  font-size:13.5px !important;
  letter-spacing:.02em;
  color:#16130F !important;
}
.bcx-nm-benefit span{ font-size:12.5px !important; color:#8A847D !important; }

/* ── Home (campaign): faixa Premiado+TV (credibilidade do Tonico) ── */
.bcx-nm-cred{background:#faf6ee;padding:34px 0 72px;margin-top:0}
.bcx-nm-cred .nm-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:0 auto;padding:0 20px}
.bcx-nm-cred .nm-cred-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e9dec6;border-radius:14px;padding:18px 20px;box-shadow:0 4px 14px rgba(90,70,30,.06)}
.bcx-nm-cred .nm-cred-ic{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #e6dcc4;display:flex;align-items:center;justify-content:center;color:var(--bcx-primary,#6B6800)}
.bcx-nm-cred .nm-cred-ic svg{width:24px;height:24px}
.bcx-nm-cred .nm-cred-item strong{display:block;font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:800;color:#1f1d15;margin-bottom:2px}
.bcx-nm-cred .nm-cred-item span{font-size:13px;color:#6b645e;line-height:1.4}
@media(max-width:600px){.bcx-nm-cred .nm-cred-grid{grid-template-columns:1fr;gap:10px}}

/* ── Home (campaign): beat lifestyle do casal (estilo ISP) ── */
.bcx-nm-beat{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;margin:0}
.bcx-nm-beat .bg{position:absolute;inset:0}
.bcx-nm-beat .bg picture{position:absolute;inset:0;display:block}
.bcx-nm-beat .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.bcx-nm-beat .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(15,10,3,.72) 100%)}
.bcx-nm-beat .wrap{position:relative;z-index:2;width:100%;max-width:1100px;margin:0 auto;padding:0 26px 84px}
.bcx-nm-beat .bphrase{margin:0;color:#fff;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:clamp(28px,4vw,52px);line-height:1.08;letter-spacing:-.015em;max-width:20ch;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.bcx-nm-beat .bsub{color:rgba(255,255,255,.95);font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:clamp(15px,1.7vw,21px);line-height:1.4;max-width:60ch;margin:14px 0 0;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.bcx-nm-rise{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.bcx-nm-rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.bcx-nm-rise{opacity:1;transform:none;transition:none}}

/* Recuo lateral da 1a trust bar igual ao trust do rodape (.bcx-ft-trust-in usa 28px horizontal).
   Sem isso os icones/texto encostam na borda esquerda. calderon 12/06/2026. */
.bcx-nm-benefits-in{ padding-left:28px !important; padding-right:28px !important; }

/* Seletor de kits (mini-PDP) no MOBILE: card estreito quebrava o parcelamento.
   Empilha "10x" em cima do preco (preco em 1 linha). calderon 12/06/2026. */
@media(max-width:520px){
  #nm-hp .nm-hp-opt-p{ flex-direction:column !important; align-items:center !important; gap:0 !important; }
  #nm-hp .nm-hp-opt-p b{ white-space:nowrap; font-size:14.5px; }
  #nm-hp .nm-hp-opt-p i{ font-size:10.5px; }
}

/* Cards do grid: imagem preenche o frame QUADRADO (1:1). Vinha com object-fit:contain
   mostrando o thumb 4:5 com barras -> parecia 4:5. calderon 12/06/2026. */
.bcx-product-thumb img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center top !important; }

.bcx-nm-beat .beyebrow{margin:0 0 12px;color:#F0D08A;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:clamp(12px,1.1vw,14px);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.5)}



/* === Rodape Natu claro: tarja de baixo LIMPA (vence o tom derivado do footer.php), calderon 13/06/2026 === */
footer.bcx-ft .bcx-ft-bottom{background:#EFE9DB !important;border-top:1px solid #E4DBC9 !important}
footer.bcx-ft .bcx-ft-bottom .bcx-ft-legal,footer.bcx-ft .bcx-ft-bottom .bcx-ft-v3-line,footer.bcx-ft .bcx-ft-bottom .bcx-ft-v3-sig-link,footer.bcx-ft .bcx-ft-bottom .bcx-ft-sign-pitch{color:#5A5043 !important}
footer.bcx-ft .bcx-ft-bottom .bcx-ft-v3-sig-link strong{color:#3A332A !important}

/* === Checkout/carrinho Natu: header igual a home (logo 44px + container 1200 + padding 16), sem gap. calderon 13/06/2026 === */
.bcx-checkout-header{padding-left:0 !important;padding-right:0 !important}
.bcx-checkout-header-inner{max-width:1200px !important;padding:0 16px !important}
.bcx-checkout-logo img{height:44px !important;max-height:44px !important}

/* ── Menu principal (desktop): fonte um tico menor p/ caber melhor em monitor estreito.
   Engine define `.bcx-nm-menu a` em 13px (inline no header.php). Aqui a Natu reduz p/ 12px.
   Skin-only (regra MOTOR 11), sem tocar no engine. calderon 15/06/2026. ── */
.bcx-nm-menu a{ font-size:12px !important; }